CODEWITHSUNDEEP
jqueryhtmlcsshoververtical-alignment
MrJamesBond
MrJamesBond

Reputation: 417

Vertical-align span inside div @ 100% height & fixed width on hover (example included)

I am trying to achieve a hidden element that is revealed on hover, over a div that the height is unknown.

A perfect example of this is here:

http://issuu.com/

If you scroll down and hover over any publication image, it will show a semi-transparent overlay with the words "read now" perfectly aligned centrally both vertically and horizontally. both fading in and out on and off hover.

I am trying to achieve exactly this.

Thanks

Upvotes: 0

Views: 704

Answers (3)

devendrant
devendrant

Reputation: 451

Working Fiddle

Here is my implementation using pure html and css:

HTML

<div class="content">
    Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.
    <div class="hiddenElement"></div>
    <div class="textElement">Read Now</div>
</div>

CSS

.content{
    width:200px;
    height:300px;
    background:#ccc;
    position:relative;
}
.hiddenElement,.textElement{
     position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    text-align:center;
    display:none;
}
.hiddenElement{

    background:#fff;
    opacity:0.6;
}
.textElement{
    opacity:1;
    top:50%;
}
.content:hover .hiddenElement,.content:hover .textElement{
    display:block;
}

Hope it helps you

Upvotes: 1

Aminesrine
Aminesrine

Reputation: 2140

@pgruber solution is not working in Internet explorer for me.
In @devendrant solution , he is fixing line-height: 300px; or in the question ther is div that the height is unknown. try this demo: jsfiddle

html:

<div class="content">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>
    <div class="overlay">
    <span>Read more</span>
    </div>
</div>

css:

div.content{
    position:relative;
}
div.content:hover div.overlay{
    display:block;
}
div.overlay{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    color: #000;
    background-color: rgba(255,255,255,0.7);
}
div.overlay span{
    top: 50%;
    left:50%;
    position: absolute;
    margin-top: -9px;
    margin-left: -35px;
}

Upvotes: 0

Platte Gruber
Platte Gruber

Reputation: 3213

Here's a simple example using flexbox: http://jsfiddle.net/hj3gfwuk/

Your html:

<div class="parent">
    <div class="child">
        <p>Read now.</p>
    </div>
</div>

Your css: 

html, body { height: 100%; }

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
  position: relative;
  height: 50%;
  width: 50%
}

.child {
    display: none;
    background-color: rgba(255,255,255,.5);
    height: 100%;
    width: 100%;
}

.parent:hover .child {
    display: flex;
    justify-content: center;
    align-items: center;
}

The basic idea: The child element (the hidden element) has a height and width of 100% of the parent, and a background with some transparency to it. It is initially hidden with display: none; When you hover over the .parent, the css for .child is changed, and the element is displayed. Hope this helps!

Upvotes: 0

Related Questions