Появление текста при нажатии на ссылку
Есть картинка. Нужно чтобы при нажатии на нее внизу(или задаваемо) появлялся текст. Важно чтобы это было максимально коротко. Очень нужно именно в CSS. И нужно появление плавное. Бть может это можно задать transmision. Помогите)
|
Dalave1998,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
input{
opacity: 0;
width: 336px;
height: 70px;
position: absolute;
left: 14px;
}
input + div {
padding: 5px;
color: rgba(255, 255, 255, 1);
background: rgba(216, 41, 0, 1);
width: 326px;
height: 0px;
opacity: 0;
overflow: hidden;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
input:checked ~ div{
opacity: 1;
height: 200px;
}
</style>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""><input name="" type="checkbox">
<div>Есть картинка. Нужно чтобы при нажатии на нее внизу(или задаваемо) появлялся текст. Важно чтобы это было максимально коротко. Очень нужно именно в CSS. И нужно появление плавное. Бть может это можно задать transmision. Помогите)</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:35. |