Hover over an Image and another image appears - html

Question

Hi i need help with some css/html
i want to hover over an image and then another image/text appears with the background image becoming opacity :0.5
<style>
.your-img {
width: 344px; /* your image width and height here */
height: 857px;
background-image: url('images/men.png');
}
.your-hover {
width: 341px;
height: 225px;
opacity: 0;
filter: alpha(opacity = 0);
background-image: url('images/men2.png');
align:bottom;
}
.your-hover:hover {
opacity: 0.5;
filter: alpha(opacity = 50);
}
</style>
<div class="your-img">
<div class="your-hover"></div>
</div>
this is the code i am using. men.png is the main image and the men2.png is the image that should appear when i hover over men.png.
but when i hover over men.png its opacity is 1 and the hovered image is 0.5
how do i make the background image 0.5 and the hovered image 1

Answer 1

As far as I know, there isn't a CSS only way to lower the opacity of the background image only. Also, the hover will have to be on the parent as the child cannot affect the parent's styling.
The tricky part is that if you lower the opacity of the parent, the child will also have its opacity lowered. To get around this, you can play with :after and applying a background: rgba() doing something like:
JS Fiddle
.your-img {
width: 344px;
/* your image width and height here */
height: 857px;
background-image: url('images/men.png');
position: relative;
}
.your-img:after {
content: '';
top: 0;
bottom: 0;
width: 100%;
display: inline-block;
background: rgba(0, 0, 0, 0);
position: absolute;
}
.your-hover {
width: 341px;
height: 225px;
opacity: 0;
filter: alpha(opacity=0);
background-image: url('images/men2.png');
align: bottom;
display: none;
}
.your-img:hover::after {
background: rgba(0, 0, 0, .5);
}
.your-img:hover .your-hover {
display: block;
opacity: 1;
filter: alpha(opacity=50);
}

Answer 2

if i understand the question correctly, you want hovering on the outer div to show the inner?
you just need to add a css rule for outer:hover > inner
.your-img:hover > .your-hover {
opacity: 0.5;
filter: alpha(opacity = 50);
}
Example

Answer 3

Hello you can simplify your code a lot but just having this css. There is no need to create a separate hover div. When you apply the pseudo class :hover to the .your-img class all you need to do is set the opacity there and the new url to your other background image.
.your-img {
width: 344px; /* your image width and height here */
height: 857px;
background-image: url('http://placehold.it/350x150');
}
.your-img:hover {
width: 341px;
height: 225px;
background-image: url('http://placehold.it/350x150');
opacity: 0.5;
Here is a fiddle to illustrate https://jsfiddle.net/gward90/25bcmmhb/

Answer 4

Your code has quite a few errors, particularly where the hover is. You need to have the hover on the parent. Also, in your code youu are trying to make the parent go to 0.5 opacity and the child to 1. This isn't possible, the child is inside the parent, and it will already be 0.5 opacity because the parent is, so you will never get it back to 1.
I have left 2 scripts for you to try below, the first is a modified version of yours which should get the hover working, but you will have issues with the opacity as i described above, the second is a modified html and style to give you an example of how it should be laid out.
Example
.your-img {
width: 344px; /* your image width and height here */
height: 857px;
background-image: url('images/men.png');
}
.your-img:hover .your-hover{
opacity: 0.5;
filter: alpha(opacity = 50);
}
.your-hover {
width: 341px;
height: 225px;
opacity: 0;
filter: alpha(opacity = 0);
background-image: url('images/men2.png');
align:bottom;
}
</style>
<div class="your-img">
<div class="your-hover"></div>
</div>
<style>
.parent {
width: 344px; /* your image width and height here */
height: 857px;
position: relative;
background-image: url('images/men.png');
}
.parent:hover .img-1{
opacity: 0.5;
filter: alpha(opacity = 50);
}
.parent:hover .img-2{
opacity: 0.5;
filter: alpha(opacity = 50);
}
.img-1 {
background-image: url('images/men.png');
position: absolute;
height: 100%;
width: 100%;
}
.img-2 {
background-image: url('images/men2.png');
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);
width: 341px;
height: 225px;
bottom: 0;
}
</style>
<div class="parent">
<div class="img-1"></div>
<div class="img-2"></div>
</div>