CODEWITHSUNDEEP
cssoverlay
H Sturma
H Sturma

Reputation: 301

Image hover overlay with text - text position

Good evening, I am trying to make image hover overlay with text, but displayed text is always on the top of the image. I would like to display it in the middle of it. I've tried padding etc, but it moved the overlay as well, that it covered also the free space below the image. Could you please help me, how to margin only text from top? Thank you!

EDIT: Or the best solution would be, if I could include another div with text only. Because I need to include text with html tags and it's not possible this way, via "content:"

http://jsfiddle.net/sL6bjebx/

Here is CSS code:

.image {
    position:relative;
    margin: 0 auto;

}
.image img {
    width:100%;
    vertical-align:;
}
.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;

    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

Upvotes: 2

Views: 2253

Answers (3)

om_jaipur
om_jaipur

Reputation: 2196

Here is the solution with another div or something, where would be possible to insert text with HTML tags:

.image {
    position:relative;
    margin: 0 auto;
    width: 317px;
    height: 317px;
    text-align: center;

}
.image img {
    width:100%;
    vertical-align:;
}
.image .overlayText {
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    line-height:317px;

    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
  margin:0;
}
.image:hover > .overlayText {
    opacity:1;
}
 <div class="image">
   <img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
   <p class="overlayText"><b>Here</b> is some text</p>
</div>

Upvotes: 3

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

If your overlay text is going to be a one liner then you can use line-height css property to make it vertically center aligned 

.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    line-height:300px;
}

and if not, then I will suggest to use another way to display the content.

such as :before just like this fiddle, Or you can use a <p> tag as well instead of the :before tag check this fiddle.

.image:after {
    content:'';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1
}
.image:before {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 20px;
    top:0; left:0; right:0;
    bottom:0;
    opacity:0;
    margin:auto;
    z-index:2
}
.image:hover:after {
    opacity:1;
}
.image:hover:before {
    opacity:1;
}

Upvotes: 3

om_jaipur
om_jaipur

Reputation: 2196

You should simply add line-height

.image {
    position:relative;
    margin: 0 auto;

}
.image img {
    width:100%;
    vertical-align:;
}
.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    line-height:317px;

    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}
<div class="image" style="width: 317px; height: 317px; text-align: center;">
    <img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg"> 
</div>

Upvotes: 1

Related Questions