Hide image by CSS when doing hover

Question

Hide image by CSS when doing hover

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have two divs positioned one on top of the other. In each div I have a photo. In the first appears the face of an unfocused person and above (in the other div) a png file where it looks like a text that says TOP SECRET. My idea is that when making a hover the TOP SECRET image disappears and the image of the face is focused.

HTML

<div id="div2">
    <img src="mySelf.png" id="mySelf">
</div>
<div id="div2y5">
    <img src="topSecret.png" id="topSecret">
</div>

CSS

#mySelf{
width: 200px;
height:: 200px;
margin: 0 auto;
padding-top: 50px;
filter: blur(5px);
}

#mySelf:hover{
margin: 0 auto;
padding-top: 50px;
filter: none;
}

#topSecret{
padding-top: 77px;
padding-left: 33px
}

#topSecret:hover{
padding-top: 77px;
padding-left: 33px;
visibility: hidden
}

#div2{
width: 200px;
}

#div2y5{
width: 200px;
}

#div2 img{
float: right;
position:absolute;
visibility:visible;
}

#div2y5 img{
float: right;
position:absolute;
visibility:visible;
}

I'm trying to make the hover over all the space occupied by the div container, both in div2 and in div2y5 since when doing it over images when being a png when I have the mouse over the text it has the effect but it does not apply to me the over in the image of the face underneath. He treats them independently so he wanted to do it in the div. And if you have the mouse on me apply the effect to both images

I attached the link of the two single images: link

html css hover

asked by Eduardo 04.10.2017 в 19:21

source

2 answers

1

Here's how it should work:

#mySelf{
width: 200px;
height:: 200px;
margin: 0 auto;
padding-top: 50px;
filter: blur(5px);
}

.wrapper:hover #mySelf{
margin: 0 auto;
padding-top: 50px;
filter: none;
}

#topSecret{
padding-top: 77px;
padding-left: 33px
}

.wrapper:hover #topSecret{
padding-top: 77px;
padding-left: 33px;
visibility: hidden
}

#div2{
width: 200px;
}

#div2y5{
width: 200px;
}

#div2 img{
float: right;
position:absolute;
visibility:visible;
}

#div2y5 img{
float: right;
position:absolute;
visibility:visible;
}

<div class="wrapper">
  <div id="div2">
    <img src="https://i.imgur.com/V45J1Wu.png" id="mySelf">
  </div>
  <div id="div2y5">
    <img src="https://i.imgur.com/IY5EYTc.png" id="topSecret">
  </div>
</div>

Explanation: I put a div (wrapper) that surrounds the divs (div2 y div2y5) and on that we apply the hover of the css. For example:

.wrapper:hover #topSecret{
   visibility: hidden
}

By doing over on .wrapper we change visibility of #topSecret . The same happens in the case of .wrapper:hover #mySelf{filter: none;}

answered by 04.10.2017 в 20:06

SMTP connect () failed How can I work with events in a meteor project, for example animate ()?

score 1 · Accepted Answer

Modifying your structure a bit only needs some changes.

Example

.photo {
  height: 200px;
  margin: 50px auto;
  position: relative;
  width: 200px;
}
/* Contenedor de la imagen */
.photo-container {
  height: 100%;
  filter: blur(5px);
  transition: all .45s ease;
  width: 100%;
}
/* Banner de la imagen */
.photo .photo-banner {
  left: 50%;
  transition: all .45s ease;
  position: absolute;
  top: 25px;
  transform: translateX(-50%);
}
/* Cuando se haga hover sobre el contenedor */
.photo:hover > .photo-container {
  filter: blur(0);
}
.photo:hover > .photo-banner {
  opacity: 0;
}

<div class="photo">
  <div class="photo-container">
    <img src="https://i.imgur.com/V45J1Wu.png" alt="">
  </div>
  <div class="photo-banner">
    <img src="https://i.imgur.com/IY5EYTc.png" alt="">
  </div>
</div>