how to set previous next icons in middle of height of image on hover that image

By : ArunK
Source: Stackoverflow.com
Question!

I was doing previous and next experiments like facebook, as we do a hover on image it will show previous and next icons. I modified the icons a little bit using simple CSS. but only thing i am missing here is the correct position of the navigation div's. I want them in the middle of image no matter if the image is 600*600 or 1024*800.

i tried these, but didnt make any progress -

var maskHeight = ($('mainOne').height() - 50);
$('#hoverP').css({top:maskHeight}).show();
$('#hoverN').css({top:maskHeight}).show();

here is sample test case, which includes everything related to problem, Please Help.-

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="./jQuery.min.js"></script>
    <style>
        .imgHover {
            display: inline;
            position: relative;
        }
        .imgHover .hoverP {
            display: none;
            position: absolute;
            left: 3px;
            top:-200px;
            z-index: 2;
        }
        .imgHover .hoverN {
            display: none;
            position: absolute;
            right: 0px;
            top:-200px;
            z-index: 2;
        }
        .prev_big,.next_big {
            background-color:rgba(66,28,82,0.4);;
            border:2px solid rgba(255,255,255,0.7);
            color:#FFF;
            font-size:78px;
            font-weight:700;
            width:30px;
            height:200px;
            line-height:200px;
            -webkit-transition:.4s all;
            -moz-transition:.4s all;
            -o-transition:.4s all;
            transition:.4s all;
            text-shadow:0 1px 0 #FFF;
            z-index:3;
            text-decoration:none;
            -moz-transition-duration:.4s;
            -webkit-transition-duration:.4s;
            -o-transition-duration:.4s;
            transition-duration:.4s;
        }

        .prev_big {
            border-bottom-right-radius:15px;
            border-top-right-radius:15px;
            margin-left:-3px;
            padding:0 20px 0 0;
        }

        .next_big {
            border-bottom-left-radius:15px;
            border-top-left-radius:15px;
            right:0;
            padding:0 5px 0 15px;
        }

        .prev_big:hover,.next_big:hover {
            color:#FFF;
            background:#732C7B;
            padding-top:140px;
            padding-bottom:140px;
        }

    </style>

</head>
<script>
$(function() {
    $(".imgHover").hover(
        function() {
            $(this).children("img").fadeTo(200, 0.95).end().children(".hoverP").show();
        },
        function() {
            $(this).children("img").fadeTo(200, 1).end().children(".hoverP").hide();
        }
    );
    $(".imgHover").hover(
        function() {
            $(this).children("img").fadeTo(200, 0.95).end().children(".hoverN").show();
        },
        function() {
            $(this).children("img").fadeTo(200, 1).end().children(".hoverN").hide();
        }
    );
});
</script>
<body>

    <div class="imgHover">
        <div class="hoverP"><a class="prev_big" href="page1.html" title="View Previous Page"><</a></div>
            <img id="mainOne" src="./oneB.jpg" alt="">
        <div class="hoverN"><a class="next_big" href="page3.html" title="View --Next-- Page">></a></div>
    </div>

</body>
</html>
By : ArunK


Answers
Why you need jQuery, bunch of styles with filled markup? I've made this from complete scratch and you see if it's useful

Demo

On the other hand you can use transitions for smoothness - Demo

<div class="wrapper">
    <img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <div class="bar"><a href="#">Previous</a><a href="#">Next</a></div>
</div>

CSS

div.wrapper {
    position: relative;
    display: inline-block;
}

.bar {
    opacity: 0;
    background: rgba(25,25,25,.5);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
}

div:hover .bar {
    opacity: 1;
}

.wrapper a {
    position: absolute;
}

.wrapper a:nth-of-type(1) {
    left: 0;
}

.wrapper a:nth-of-type(2) {
    right: 0;
}
By : Mr. Alien


This video can help you solving your question :)
By: admin