CODEWITHSUNDEEP
htmlcssopacity
scandir
scandir

Reputation: 313

CSS Opacity property does not apply as it should on :hover state

I have a strange problem with opacity property in CSS. So, I want a hover effect, image should get transparent green overlay. It seems that opacity is just applying to the overlay color(it turns lighter when you decrease opacity but image under the overlay does not appear). I have also tried to solve the problem with rgba, but no success.

It's a little hard to explain, so here is the fiddle: http://jsfiddle.net/4T3dc/3/

    <style>
        .col-sm-4 {
          padding-top: 20px;
        }
        .col-sm-4 .img-responsive {
          width: 350px;
          height: 350px;
          cursor: pointer;
        }
        .col-sm-4 .img-responsive#one-image {
          background: url(http://shrani.si/f/e/jm/42FHXzWF/cover.png);
        }

        .col-sm-4 .img-responsive#one-image:hover {
          background: #1abc9c;
          opacity: 0.3;
        }
</style>

<div class="row">
    <div class="col-sm-4">
        <div class="img-responsive img-rounded" id="one-image"alt="Responsive image">
        </div>
    </div>
</div>

Thank you!

Upvotes: 0

Views: 287

Answers (3)

Jeff Miller
Jeff Miller

Reputation: 2443

You can add the green/opacity hover effect using :after.

Example on JSFiddle.

Make the following changes to your CSS:

.col-sm-4 .img-responsive#one-image {
    position: relative;
}
.col-sm-4 .img-responsive#one-image:hover:after {
    background: #1abc9c;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content:"";
}

Upvotes: 5

Serlite
Serlite

Reputation: 12258

What your CSS presently does isn't overlay a colour on the background image - instead, it completely replaces the background image with the colour you specify, and gives it an opacity. One way to achieve what you're suggesting is to use an actual <img> element, and use the background of its container (.col-sm-4 .img-responsive#one-image) to simulate an overlaid colour by changing the image's opacity.

So your HTML would shift slightly to:

<div class="row">
    <div class="col-sm-4">
        <div class="img-responsive img-rounded" id="one-image" alt="Responsive image">
            <img src="http://shrani.si/f/e/jm/42FHXzWF/cover.png">
        </div>
    </div>
</div>

And your new CSS style definitions would be:

.col-sm-4 .img-responsive#one-image img {
    width:100%;
}
.col-sm-4 .img-responsive#one-image {
    background:#1abc9c;
}
.col-sm-4 .img-responsive#one-image:hover img {
    opacity: 0.7; /* 1 - 0.3, where 0.3 is the desired opacity of the colour overlay */
}

Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

Upvotes: 0

user3758133
user3758133

Reputation: 238

If you are using CSS3 you can use -webkit-filter.

-webkit-filter: hue-rotate(240deg) saturate(0.6);

Like in this Fiddle: http://jsfiddle.net/4T3dc/6/

I am not entirely sure if that's what you want from your description. However, you can use this website to tweak effects to get exactly what you want: http://html5-demos.appspot.com/static/css/filters/index.html

Upvotes: 0

Related Questions