CODEWITHSUNDEEP
htmlcss
Ivan Topić
Ivan Topić

Reputation: 3185

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" />
        </a>
    </div>
</figure>

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

http://codepen.io/filaret/pen/NRpVyr

Upvotes: 3

Views: 4484

Answers (4)

nucleardreamer
nucleardreamer

Reputation: 54

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

Upvotes: 1

Jirsbek
Jirsbek

Reputation: 58

I've tried to simplify the code a little bit. I hope it's what you've tried to achieve.

The trick is to place a as a independent element to img.

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

http://codepen.io/anon/pen/LRWoaR

Upvotes: 0

Seno
Seno

Reputation: 419

You need to understand your markup works. Your image will be displayed on top of everything, and when you put a background colour on .gallery-icon that background colour will be under the image, and since the anchor link doesn't has a width and height, it only take a little bit of portion, that's why it showing a border bottom.

To create a background overlay on hover, you need to position it to be on top of the image.

Using pseudo element to create a background overlay:

&:hover .gallery-icon {
  &::before {
    content: '';
    background-color: #333; 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.2;
  }
}

The pseudo element has a position absolute so it will displayed on top of the image. top, left, right and bottom 0 to tell the pseudo element to stretch it self as tall and as wide as the parent element.

Hope this helps.

Upvotes: 1

CJPN
CJPN

Reputation: 1519

The image (http://placehold.it/300x300) has a solid background colour, no?

That will block anything happening behind itself.

Upvotes: -1

Related Questions