Посмотрите на мой jsfiddle
Вот пример кода js:
$(".box").hover(function () {
$(this).find('.box-hover').fadeIn(100);
$(".box-tresc").show();
},
function () {
$(this).find('.box-hover').fadeOut(100);
$(".box-tresc").hide();
});
Я хочу, box-tresc
div box-tresc
с содержимым "xxxxx" отображался в центре изображения. Я попробовал margin-top:-30px;
но это не сработало.
ОБНОВЛЕНО:
Здесь есть скрипка, содержащая возможное решение (чистый CSS): link
CSS:
.box-hover {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
width: 290px;
height: 185px;
margin: 5px 5px 0 5px;
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">
<div class="box-hover">some text</div>
<div class="box-image">
<img src="https://lh5.googleusercontent.com/mqHWHd2jm2141eD4SWowcIss1FwGmdZm3f0DxO0HCxYyWepZn8YyIKrMyrYKBlmGYU6zjiV-UQ=s460-h340-e365" />
</div>
<div class="box-text">Theme 2.0
<br><span>Created by: <em>User</em></span>
</div>
</div>
Это пример, не перемещающий текст " Тема 2.0 " при зависании.
Вы должны использовать display:absolute;
как я сделал здесь в вашем коде.
И чем вы можете использовать margin
.
Я использовал margin:-110px 0 0 50px;
(Измените, как хотите)
.box-tresc {
display:none;
position:absolute;
margin:-110px 0 0 50px;
color:white; /* only to make te text more visable */
}
Попробуйте что-нибудь вроде tt?
$(".box-tresc").css({"right":"20%","display":"block"});
Вы можете использовать position:absolute
с% позиционирования, чтобы свободно менять изображение. Просто установите:
.box-tresc {
display: none;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.box-image {
margin: 5px 5px 0;
position: relative;
}
Измените код css, как показано ниже, и попробуйте сейчас
.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;
}
Надеюсь это поможет..
Самое простое решение - просто добавить text-algin
и margin-top
в ваш .box-tresc
. Задача решена.
.box-tresc {
display:none;
text-align: center;
margin-top:-100px;
}
position relative
- ваш друг здесь.