CODEWITHSUNDEEP
htmlcss
Chibi
Chibi

Reputation: 103

Getting a background color to be on top of an image

I'm trying to create an overlay to be over an image when I hover over it. The color that I used to create the overlay doesn't go over the image. It goes around the image and I want it to be on top of the image. I'm not sure where I went wrong. It is also does this weird jumping thing when you hover over it.

Html

<div class="overlay">
  <div class="overlay2"></div>
    <figure class="box-img">
      <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
    </figure>
  </div>

css

.overlay:hover{
background: red;
position: absolute;
opacity: 0.7;
}

.box-img img{
position: relative;
}

Here is a jsfiddle: JSFIDDLE

Upvotes: 2

Views: 62

Answers (4)

Chuks
Chuks

Reputation: 1174

Restructure your markup this way (Here is a JSFIDDLE)

HTML

<div class="overlay-container">
    <div class="overlay"> </div>
    <figure class="box-img">
        <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
    </figure>
</div>

CSS

.overlay-container {
    width:225px;
    height:225px;
    position: relative;
}
.overlay-container:hover .overlay{
    background: red;
    position: absolute;
    opacity: 0.7;
    z-index:1;
    width: 100%;
    height: 100%;
    margin-left: 40px;
}
.box-img img{
    position: relative;
}

Here is a JSFIDDLE

Upvotes: 0

Florian Rivoal
Florian Rivoal

Reputation: 501

figure {
  position: relative;
  display: inline-block;
}
img {
  display:block;
}
figure:hover::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom:0;
  background: red;
  opacity: 0.7;
}
<figure>
  <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>

Upvotes: 0

Shikkediel
Shikkediel

Reputation: 5205

The large 'border' is because of the default margin and padding of a figure element, according to W3 these are the common specs :

figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

I always like to do a complete reset myself at the start of the stylesheet :

*, *:before, *:after {
margin: 0;
padding: 0;
}

In the current form of your code, the overlay won't show on top though because the color would be in the background. A pseudo element might do what you're after (updated the code here with a direct approach) :

http://jsfiddle.net/j0qfhr9e/

<figure class="box-img">
  <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>


.box-img {
display: inline-block;
position: relative;
line-height: 0;
}

.box-img:hover:after {
content: '';
width: 100%;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}

The first draft for completeness, closer to the original markup :

http://jsfiddle.net/rLu2c4kr/

Upvotes: 4

Enjayy
Enjayy

Reputation: 1074

Another alternative to make this work without psuedo class' like @Shikkediel mentioned you can set the can use a background image instead of an image tag http://jsfiddle.net/zgw5tmrc/3/

body, figure {
    padding:0;
    margin: 0;
}
.box-img {
    position: relative;
    height: 300px;
    width: 300px;
    background: url('http://i.imgur.com/PHKC3T9.jpg');
    background-size: cover;
}

.box-img:hover .overlay{
    position: absolute;
    background: red;
    width: 100%;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    opacity: .7;
}
<figure class="box-img">
    <div class="overlay"></div>
</figure>

Upvotes: 0

Related Questions