CODEWITHSUNDEEP
htmlcss
WaterlessStraw
WaterlessStraw

Reputation: 673

How do you create a transparent overlay with text upon mouse hover?

I'm getting super stuck on this and I feel like I really shouldn't be. I'm trying to have a transparent overlay with text appear on an image when your mouse hovers over the image. I have the transparent overlay working correctly, and the text appearing, but I can't figure out how to center the text or how to change the font, etc. It also looks like the bottom images aren't the same size, and I'm not sure why.

I feel that I may doing this the wrong way.

The JSFiddle: https://jsfiddle.net/w758bg0s/5/ Scroll down to the bottom of the CSS to find my code.

HTML:

<div id="specials">
  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <h2>This season's specials:</h2>
      </div>
      <div class="row">
        <div class="one-half column">
          <div class="food-image food1">
            <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/05/30/422/White_Nectarine_Persian_Cucumbers_English_Peas_Watercress.jpg">
          </div>
        </div>
        <div class="one-half column">
          <div class="food-image food2">
            <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/07/10/934/Spaghetti_Squash_Almonds_Balsamic.jpg">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="one-half column">
        <div class="food-image food3">
            <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/08/21/750/Southwest_Panzanella_Pickled_Nopales_Jicama_Corn_Tortilla.jpg">
          </div>
        </div>
        <div class="one-half column">
          <div class="food-image food4">
            <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/09/24/865/Roasted_Carrots_Sunchokes_Avocado_Almonds.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

/* Specials
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#specials{
  background-image: url(http://i.lmnd3.com/images/LemonadeBkg_Avoc.jpg);
  text-align: center;
  min-height: 800px;
}
#specials h2{
  margin-top: 10rem;
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
}
#specials .food-image{
  position: relative;
  margin-top: 2rem;
  max-width: 500px;
  max-height: 250px;
  overflow: hidden;
}
#specials img {
    width: 100%;
    vertical-align: top;
}
#specials .food-image:after {
    content: 'Southwest “Panzanella,” Pickled Nopales, Jicama, Corn Tortilla';
    text-align: center;
    color:#fff;
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all .5s;
    -webkit-transition: all .5s;
}
#specials .food-image:hover:after{
  opacity: 1;
}

I'm trying to copy this website from scratch: http://www.lemonadela.com/, just to get some experience with creating all the features that the site has.

Thank you for any advice/suggestions.

-All the best

Upvotes: 1

Views: 3170

Answers (2)

Kyrbi
Kyrbi

Reputation: 2250

First you have to start with this html code:

<div class="img-with-text">
    <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/05/30/422/White_Nectarine_Persian_Cucumbers_English_Peas_Watercress.jpg" alt="image">
    <div><h2>Hello!</h2></div>    
</div>

now you have to create transparent overlay from that div inside your div.img-with-text, so you use this code

.img-with-text{
    position: relative;
    width: 693px;
}
.img-with-text > div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0);
    color: transparent;
    transition: 1s;
}

.img-with-text must be relative, otherwise absolute would expand over whole page, now is div absolute size inside relative div.img-with-text.

Now comes the latest code you have to add: 

.img-with-text > div:hover{
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}

this will change transparent values into something that you can see. Also notice transition: 1s; in img-with-text > div, that sets how long it takes to change colors.

Also here is jsfiddle https://jsfiddle.net/zwpu0LgL/.

EDIT:
Also I created another JSFiddle that shows another approach with not changing backgound color of whole div, but just h2 element. https://jsfiddle.net/zwpu0LgL/1/

Upvotes: 1

SaoBiz
SaoBiz

Reputation: 1249

Adding padding-top: 20%; to your #specials .food-image:after CSS centers the text. Though it probably isn't as robust of a solution as doing it with separate HTML elements.

JSFiddle: https://jsfiddle.net/w758bg0s/12/

Upvotes: 1

Related Questions