Show Div On Image On Hover Jquery

Look at my jsfiddle Here is the sample js code: $('.box').hover(function () { $(this).find('.box-hover').fadeIn(100); $('.box-tresc').show(); }, function () { $(this).fin

Solution 1:

UPDATED:

Heres a fiddle containing a possible solution(pure CSS): link

CSS:

.box-hover {
   background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 290px;
    height: 185px;
    margin: 5px5px05px;
    opacity: 0;
    color:transparent;
    -webkit-transition:  0.4s;
    transition:  0.4s;
    line-height:185px;
    text-align:center;
}
.box-hover:hover {
    color:white;
    opacity:1;
}

HTML:

<div class="box">
    <divclass="box-hover">some text</div><divclass="box-image"><imgsrc="https://lh5.googleusercontent.com/mqHWHd2jm2141eD4SWowcIss1FwGmdZm3f0DxO0HCxYyWepZn8YyIKrMyrYKBlmGYU6zjiV-UQ=s460-h340-e365" /></div><divclass="box-text">Theme 2.0
        <br><span>Created by: <em>User</em></span></div></div>

Solution 2:

This is an example without moving the text "Theme 2.0" when hovering.

You should use display:absolute; like i did here in your code. And than you can use margin. I used margin:-110px 0 0 50px;(Change it like you want)

.box-tresc {
    display:none;
    position:absolute;
    margin:-110px0050px;
    color:white;        /* only to make te text more visable */
}

DEMO

Solution 3:

You could use position:absolute with % positioning in order to change image freely. Simply set:

.box-tresc {
    display: none;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}


.box-image {
    margin: 5px5px0;
    position: relative;
}

Solution 4:

The most simple solution is to just add text-algin and margin-top to your .box-tresc class. Problem solved.

.box-tresc {
    display:none;

    text-align: center;

    margin-top:-100px;
}

Solution 5:

Change your css code like below and try now

.box {
   width: 300px;
   min-height: 200px;
   position:relative;
   background-color: #ECECEC;
   border: 1px solid #C6C6C6;
   border-radius: 3px;
   text-align: left;
   }

  .box-tresc {
    display:none;
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    float: left;
    }

Hope this helps..