Ivan Topić Ivan Topić - 1 year ago 114
CSS Question

Background overlay on hover

Is it possible to have markup like this but also background overlay on hover?

<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="www.google.com">
<img src="http://placehold.it/300x300" />

I tried placing
background-color: #333
on hover, but only something like border-bottom appears?


Answer Source

You are definitely on the right track. Since you are using an :after element for the icon, you should leave that element alone since it's already positioned and defining its own width+height (based off the icon).

The reason the :after selector positions itself correctly is because it's not relying on its parent containers dimensions. You only have it as absolute from the top and left, which is fine. But it doesn't know about how tall it should be, because its parent has no defined height! If you use absolute positioning, you need to define the parent containers dimensions so that the child knows where its bounds are.

So first off, .gallery-icon is already a block element, so you don't need to define its width (its already 100% by nature), just the height:

 .gallery-icon {
    position: relative;
    height: 100%;

Second, you should use a :before element to define a background, so that you don't have to mess with the :after icon:

 &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #333;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

Now, you just have to add the opacity change on hover!

 &:hover {
    .gallery-icon {
       &:before {
          opacity: .5;
       &:after {
          opacity: 0.6;

Hope that helps, here is a codepen forked off your original: http://codepen.io/anon/pen/JRWqxX

Edit: I also noticed that your img tag is causing it to go below the visual bottom of the container, a quick fix is just to add:

  .gallery-icon {
     img {
        display: block;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download