Кескінге әсер ететін мәселе

Сәлеметсіз бе, 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
ұшу кезінде не болуы керек? div суреттің астына түсуі керек пе?
қосылды автор Sergio, көзі
ұшу кезінде не болуы керек? div суреттің астына түсуі керек пе?
қосылды автор Sergio, көзі
Бұл сияқты? jsfiddle.net/Nnd7w/3
қосылды автор Sergio, көзі
Бұл сияқты? jsfiddle.net/Nnd7w/3
қосылды автор Sergio, көзі
ok, және бастапқы нүкте - жай ғана сурет?
қосылды автор Sergio, көзі
ok, және бастапқы нүкте - жай ғана сурет?
қосылды автор Sergio, көзі
суретте бейнеленген кезде, қызыл бөлік суреттің астында пайда болуы керек және «мұнда басыңыз ..» сілтемесі сурет астында болуы керек және суретті ортаға қою керек.
қосылды автор Monkey D Luffy, көзі
суретте бейнеленген кезде, қызыл бөлік суреттің астында пайда болуы керек және «мұнда басыңыз ..» сілтемесі сурет астында болуы керек және суретті ортаға қою керек.
қосылды автор Monkey D Luffy, көзі
Ағылшын тілімнің жаман екендігіне өкінемін
қосылды автор Monkey D Luffy, көзі
жоқ ... менің суретте осында жазған алғашқы сурет сияқты ...
қосылды автор Monkey D Luffy, көзі
жоқ ... менің суретте осында жазған алғашқы сурет сияқты ...
қосылды автор Monkey D Luffy, көзі
иә .. div суреттің астында болуы керек ..
қосылды автор Monkey D Luffy, көзі
иә .. div суреттің астында болуы керек ..
қосылды автор Monkey D Luffy, көзі

7 жауаптар

Бұл әрекетті байқап көріңіз - ол сіз үшін жұмыс істейтінін білуге ​​рұқсат етіңіз.

Fiddle

Бірнеше өзгерістер - кейбір тазалауды қолдануға болады.

     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, көзі

Бұл әрекетті байқап көріңіз - ол сіз үшін жұмыс істейтінін білуге ​​рұқсат етіңіз.

Fiddle

Бірнеше өзгерістер - кейбір тазалауды қолдануға болады.

     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
қосылды
Осыған тапқан жалғыз мәселе - суретті түсіргенде - көк түстің жоғарғы жағындағы сілтемені көгілдір және асты сызылған сызықпен көруге және оны төмен түсіп, ақ фонға айналдыруға болады. Бірнеше секундта оған қарап тұрғандай, ол жайында қарап отырды.
қосылды автор 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;
}

Төменгі сипатта ойнаудың орнына мен ашықтықты өзгерттім. Сондай-ақ, суреттің астынан көрсету үшін, якорь тегіне сабақ бердім. Сондай-ақ, суретті түсіріп, байлауды санау үшін ені мен биіктігін өзгерту үшін кескінге бірнеше маржа бердім.

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;
}

Төменгі сипатта ойнаудың орнына мен ашықтықты өзгерттім. Сондай-ақ, суреттің астынан көрсету үшін, якорь тегіне сабақ бердім. Сондай-ақ, суретті түсіріп, байлауды санау үшін ені мен биіктігін өзгерту үшін кескінге бірнеше маржа бердім.

See Fiddle

2
қосылды

top: 160px; дегенге bottom: -100px; өзгертті және ол жақсы жұмыс істейді!

Fiddle

Өңдеу: Кейбір қосымша параметрлер түсінбеймін, себебі:

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, көзі

top: 160px; дегенге bottom: -100px; өзгертті және ол жақсы жұмыс істейді!

Fiddle

Өңдеу: Кейбір қосымша параметрлер түсінбеймін, себебі:

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, көзі