CODEWITHSUNDEEP
htmlcss
Alexey Tseitlin
Alexey Tseitlin

Reputation: 1319

Darken image on hover

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:

Is there another way to create this effect?

Upvotes: 1

Views: 3780

Answers (6)

jbutler483
jbutler483

Reputation: 24559

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>

Upvotes: 0

Hynes
Hynes

Reputation: 3424

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>

Upvotes: 1

oneimperfectguy
oneimperfectguy

Reputation: 959

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);
}

Upvotes: 0

Grzegorz Pawlik
Grzegorz Pawlik

Reputation: 2216

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;
}

Upvotes: 0

Ufuk Hacıoğulları
Ufuk Hacıoğulları

Reputation: 38468

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/

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

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>

Upvotes: 0

Related Questions