Image and Color Overlay on Hover

CSS Color overlay hover

Here you go, simply reverse the css http://jsfiddle.net/4fgnd/1226/

.image:before {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:before {
    opacity:1;
}
.image:hover:before {
    opacity:0;
}

Image overlay on hover css issue

The question asks what is the problem with the overlay not overlaying the img.

The basic problem is that the img is within a div which is being used as the overlay, so when the overlay z-index is increased on hover the whole lot 'moves forward' on the z-access so their relative positions on that axis are not changed.

If we separate out the img from the overlay and make sure the overlay stacks over the img then the hover will work.

Here's a simple example, maintaining all the CSS given in the question but separating the overlay element from the containing element. Obviously in the real version the php takes the place of the img element here. img and overlay are given position absolute so they sit in the same place.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .content_overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #FFF;
        rbackground-color:transparent;
    }
    .content_overlay:hover{/* taken out the & and written as pure CSS rather than SCSS/SASS */
            display: block;
            background: rgba(0, 0, 0, .6);
            color: #1f8dd6;
            z-index: 999; /* kept this but not strictly necessary */
    }
    </style>
    </head>
    <body>
    <div <div class="slider-inner pop parentSlider-cell" style="width: 100px; height: 100px; position: relative;"> <!-- given style just for this demo -->
      <img src="" style="width:100%;height:100%;background-color:blue;position:absolute;"/> <!-- using a blue square img element just for this demo -->
      <div class="content_overlay"></div>
    </div>
    </body>
    </html>

How to overlay image with color in CSS?

You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

Color overlay over image on hover

Changing block opacity would also change its content, so you might also try changing alpha channel of the overlay using pseudo elements and rgba() background color

.image1:hover:after {    background-color: rgba(0, 0, 255, 0.3);    content: "";    height: 100%;    position: absolute;    width: 100%;}.image1 {    background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);    display: inline-block;    height: 300px;    margin-left: auto;    position: relative;    vertical-align: top;    width: 300px;}

<div class="image1"></div>

Image and Color Overlay on Hover

CSS Color overlay hover

Image overlay on hover css issue

How to overlay image with color in CSS?

Color overlay over image on hover

Related Topics

Leave a reply