Darken image on hover

Question

Trying to make the image dark on hover but something is wronge.

I have used "span" to create the darker layer but when I add it, it looks bad.

<div class="postOUT">

    <div class="post_first">
        <span></span>
        <div class="category">Stuff</div>
        <h1>Text will go here</h1>
    </div>

FULL CODE WITH CSS:

• Without SPAN - http://jsfiddle.net/np2fLwva/
• With SPAN - http://jsfiddle.net/tvL84sd9/

Is there another way to create this effect?

Answer 1

Semantically span elements should be used for inline objects. Your use-case here is a block-level element though. So at a minimum, I would recommend using a div element. To eliminate empty HTML elements though, consider placing the background overlay on a :before / :after pseudo element.

Side-note: According to CanIUse.com , you only need a -webkit vendor prefix for transitions, and that's only for older Android browsers. Otherwise you're fine simply stating transition: [values] .

Here's an example:

 .post_first { overflow: auto; clear: both; height: 649px; background: url(http://japanpapa.ru/fun/jpap/img/featured-bg.png), url(http://japanpapa.ru/fun/jpap/img/post01.jpg) no-repeat center center; background-size: cover; position: relative; } .post_first .-content { position: relative; z-index: 1000; } .post_first:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; background: rgba(0, 0, 0, .5); -webkit-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; content: ""; z-index: 999; } .post_first:hover:before { opacity: 1; } .category { font-family: 'Open Sans', sans-serif; font-size: 1.5em; font-weight: 500; text-transform: uppercase; color: white; padding: 10px; border: 3px solid #fff; margin: 30px auto; text-align: center; width: 150px; position: relative; top: 7.4%; } .post_first h1, .post_other h1 { font-family: 'Open Sans', sans-serif; font-size: 3em; font-weight: 800; text-transform: uppercase; color: white; padding: 0 10%; margin: 30px auto; text-align: center; position: relative; top: 14.5%; } 

 <div class="postOUT"> <div class="post_first"> <div class="-content"> <div class="category">Stuff</div> <h1>Text will go here</h1> </div> </div> </div> 

Answer 2

Try like this: Demo

CSS:

.overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: transparent;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.overlay:hover {
    display: block;
    background: rgba(0, 0, 0, .5);
}

HTML:

<div class="overlay">
            <!-- <span></span>  If i add it all breakes-->
            <div class="category">Stuff</div>
             <h1>Text will go here</h1>

        </div>

Answer 3

You can do it by absolute positioning too:

.postOUT{
    position:relative;
}

.postOUT span, .postOUT span{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

Here's a working fiddle: http://jsfiddle.net/2s2fLar1/

Answer 4

If you want to avoid additional markup you can use the pseudo elements, just like in this fiddle: http://jsfiddle.net/np2fLwva/3/

.post_first:after, .post_other:after {
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
    z-index:1;
    color:black;
    opacity:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;    
}

.post_first:hover:after, .post_other:hover:after {
    opacity:1;
}

Answer 5

This a simple code HTML & CSS. You can use this to create a well shadowing effect.

HTML part.

<div class="bg">
  <div class="shade"></div>
</div>

CSS part.

.bg{
  height: 500px;
  background: url(your_image.jpg) no-repeat center center;
  background-size: cover;
}
.shade {
  width: 100%;
  height:100%;
  transition: 0.5s all;
}
.shade:hover {
  background-color: rgba(0,0,0,0.2);
}

Answer 6

You could use a single element for this, and use a pseudo element for the overlay:

 div{ height:300px; width:300px; position:relative; background:url(http://placekitten.com/g/300/300); } div:before{ content:""; position:absolute; top:0; left:0; height:100%; width:100%; background:black; opacity:0; transition:all 0.6s; } div:hover:before{ opacity:0.4; } 

 <div></div>