Проблема з ефектом наведення на зображення

Здравствуйте, я намагаюся створити ефект наведення на img.

HTML

<div>
    
    <div class="link-cont">click here to see more info</div>

</div>

css

div {
    width: 350px;
position: relative;    
}
.link-cont {
    background: red;
    position: absolute;
    bottom: 0;
    height: 100px; 
    opacity: 0;
    transition: all 0.4s;
}
div:hover  .link-cont {
    opacity: 1; 
    bottom:-100px;
}

i need a something like this , when the user hover on it image

але я отримую щось на зразок цього

current

хтось може допомогти мені досягти того, що я намагаюся зробити ..

jsFid--> http://jsfiddle.net/Nnd7w/

2
що має відбутися на hover? div під зображенням?
додано Автор Sergio, джерело
що має відбутися на hover? div під зображенням?
додано Автор Sergio, джерело
Подобається це? jsfiddle.net/Nnd7w/3
додано Автор Sergio, джерело
Подобається це? jsfiddle.net/Nnd7w/3
додано Автор Sergio, джерело
ок, і відправною точкою є просто зображення?
додано Автор Sergio, джерело
ок, і відправною точкою є просто зображення?
додано Автор Sergio, джерело
коли я наводжу на зображенні, червоне div повинне з'явитися під зображенням, а посилання "натисніть тут .." має бути під зображенням, а зображення має бути центрованим.
додано Автор Monkey D Luffy, джерело
коли я наводжу на зображенні, червоне div повинне з'явитися під зображенням, а посилання "натисніть тут .." має бути під зображенням, а зображення має бути центрованим.
додано Автор Monkey D Luffy, джерело
Мені дуже шкода про поганий англійський
додано Автор Monkey D Luffy, джерело
ні ... як перше зображення, яке я опублікував тут у моєму запиті.
додано Автор Monkey D Luffy, джерело
ні ... як перше зображення, яке я опублікував тут у моєму запиті.
додано Автор Monkey D Luffy, джерело
так .. div слід під зображенням ..
додано Автор Monkey D Luffy, джерело
так .. div слід під зображенням ..
додано Автор Monkey D Luffy, джерело

7 Відповіді

Спробуйте це - і дайте мені знати, якщо він працює для вас ..

Скрипка

Лише кілька змін - можна було б прибирати.

     div {
     position: relative;
     top: 50px;
     background-color: blue;
     width: 350px;
     height: 150px;
     margin: auto;
 }
 .link-cont {
     background: red;
     position: relative;
     left: -50px;
     top: -200px;
     width: 450px;
     height: 250px;
     opacity: 0;
     transition: all 0.4s;
     z-index: -1
 }
 div a {
     position: relative;
     top: 210px;
     left: 50px;
     opacity: 0;
 }
 div:hover .link-cont {
     opacity: 1;
 }
a {
    text-decoration: none;
    color: #fff;
}
 div:hover a {
     opacity: 1;
 }
3
додано
Я думаю, хтось бив мене до відповіді ^ - ^
додано Автор Lloan Alas, джерело
Ха-ха я теж. Тим не менш, моя активізується лише при наведенні курсору миші на зображення. Він, можливо, не потребуватиме цього.
додано Автор nondefault, джерело
ТАК ЦЕ Я ЩО Я НЕДЕД. і я змінюю декілька властивостей .. jsfiddle.net/Nnd7w/14
додано Автор Monkey D Luffy, джерело
@nondefault, Lloan Alas, UmairP Він дав 100% відповідь на моє запитання :). Але дякую вам, хлопець .. Я дуже ціную вашу допомогу :)
додано Автор Monkey D Luffy, джерело

Спробуйте це - і дайте мені знати, якщо він працює для вас ..

Скрипка

Лише кілька змін - можна було б прибирати.

     div {
     position: relative;
     top: 50px;
     background-color: blue;
     width: 350px;
     height: 150px;
     margin: auto;
 }
 .link-cont {
     background: red;
     position: relative;
     left: -50px;
     top: -200px;
     width: 450px;
     height: 250px;
     opacity: 0;
     transition: all 0.4s;
     z-index: -1
 }
 div a {
     position: relative;
     top: 210px;
     left: 50px;
     opacity: 0;
 }
 div:hover .link-cont {
     opacity: 1;
 }
a {
    text-decoration: none;
    color: #fff;
}
 div:hover a {
     opacity: 1;
 }
3
додано
Я думаю, хтось бив мене до відповіді ^ - ^
додано Автор Lloan Alas, джерело
Ха-ха я теж. Тим не менш, моя активізується лише при наведенні курсору миші на зображення. Він, можливо, не потребуватиме цього.
додано Автор nondefault, джерело
ТАК ЦЕ Я ЩО Я НЕДЕД. і я змінюю декілька властивостей .. jsfiddle.net/Nnd7w/14
додано Автор Monkey D Luffy, джерело
@nondefault, Lloan Alas, UmairP Він дав 100% відповідь на моє запитання :). Але дякую вам, хлопець .. Я дуже ціную вашу допомогу :)
додано Автор Monkey D Luffy, джерело

You want like this, check DEMO http://jsfiddle.net/yeyene/Nnd7w/17/

div {
    width: 350px;
    font-size:12px;
    position: relative;    
}
div img{
    padding:0 10px;    
}
.link-cont {
    background: red;
    position: absolute;
    bottom: 0;
    width: 370px;
    height: 210px; 
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover  .link-cont {
    opacity: 1; 
    bottom:-40px;
}
.link-cont a{    
    opacity: 0;  
}
div:hover  .link-cont a{
    position: relative; 
    opacity: 1; 
    bottom:-175px;
    left:10px;
    background:#fff;
    color:red;
    text-decoration:none;
    padding:0 10px;
}
3
додано
Єдиною проблемою, яку я бачу з цим, є те, що, коли я наведу курсор на зображення - ви можете побачити посилання у верхній частині червоного вікна у синьому кольорі та підкреслити, і подивіться, як він знизиться і перетвориться на білий фон. Kinda funky - сидів там протягом декількох секунд просто дивився на нього>
додано Автор Lloan Alas, джерело
Перевірте демо-оновлення знову.
додано Автор yeyene, джерело
Будь ласка, додайте цю нову css, щоб приховати це посилання, .link-cont a {opacity: 0; }
додано Автор yeyene, джерело

Зробив кілька модифікацій для вас CSS

div {
    width: 370px;
    position: relative;
}
.link-cont {
    background: red;
    position: absolute;
    top: 0;
    width: 370px;
    height: 200px;
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover .link-cont {
    opacity: 1;
}
div:hover img {
    margin-left: 10px;
    margin-top: 10px;
}
.link {
    display: block;
    margin-top: 170px;
    margin-left: 50px;
}

Замість того щоб грати з нижньою властивістю, я просто змінив непрозорість. Я також призначив клас для прив'язки тегу, щоб він відображався під зображенням. Крім того, ви можете бачити, що я надав деякий запас зображення, щоб зробити його центром і змінив ширину і висоту div-лічильника.

See Fiddle

2
додано

Зробив кілька модифікацій для вас CSS

div {
    width: 370px;
    position: relative;
}
.link-cont {
    background: red;
    position: absolute;
    top: 0;
    width: 370px;
    height: 200px;
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover .link-cont {
    opacity: 1;
}
div:hover img {
    margin-left: 10px;
    margin-top: 10px;
}
.link {
    display: block;
    margin-top: 170px;
    margin-left: 50px;
}

Замість того щоб грати з нижньою властивістю, я просто змінив непрозорість. Я також призначив клас для прив'язки тегу, щоб він відображався під зображенням. Крім того, ви можете бачити, що я надав деякий запас зображення, щоб зробити його центром і змінив ширину і висоту div-лічильника.

See Fiddle

2
додано

Я просто змінив внизу: -100px; на top: 160px; і він працює відмінно!

Скрипка

Редагувати: ще кілька варіантів, оскільки я не розумію:

Fiddle, and the one I think you want: Fiddle (that one's messy, but the hover only activates if you actually hover on the image.)

1
додано
Спасибі, але мені потрібно щось на кшталт першого зображення, яке я розмістив тут.
додано Автор Monkey D Luffy, джерело

Я просто змінив внизу: -100px; на top: 160px; і він працює відмінно!

Скрипка

Редагувати: ще кілька варіантів, оскільки я не розумію:

Fiddle, and the one I think you want: Fiddle (that one's messy, but the hover only activates if you actually hover on the image.)

1
додано
Спасибі, але мені потрібно щось на кшталт першого зображення, яке я розмістив тут.
додано Автор Monkey D Luffy, джерело