CODEWITHSUNDEEP
htmlcss
JNCK
JNCK

Reputation: 3

How to align vertically text on :hover

The vertical alignment of the text on :hover isn't working . Also after hovering, the whole area of posts should be cover with pointer cursor and should be clickable, but it isn't.

HTML

<div class="photoset post-background">
    <div class="imgoverlay text-light">
        <a href="{Permalink}">
            <div class="photos">
            {block:Photos}
                <img alt="" src="{PhotoURL-500}">
            {/block:Photos}     
            </div>
            <div class="overlay">
                <span class="overlaycolor"></span>
                <div class="overlayinfo">
                {block:ContentSource}
                    <a href="{Permalink}"><h6>{SourceTitle}</h6></a>
                {block:ContentSource}
                </div>
            </div>
        </a>
    </div>    
</div>

CSS

.imgoverlay {
    position: relative;
    overflow: hidden;
    display: block;
    max-width: 100%;
}

.imgoverlay img {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}

.imgoverlay .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(Opacity=0)";
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.imgoverlay:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(Opacity=100)";
}

.imgoverlay .overlaycolor {
    width: 100%;
    height: 100%;
    background: {color:Post Hover};
};

Example http://www.jnck.sk/

Thanks for any help!

Upvotes: 0

Views: 972

Answers (1)

František Maša
František Maša

Reputation: 364

Use span with display:block instead of div inside link. Block elements like div shouldn't be in inline blocks.

For vertical align of text you can use i.e. this:

.overlayinfo {
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Upvotes: 1

Related Questions