CSS при наведении на картинку появляется div блок (текст)

Тема в разделе "Верстка", создана пользователем droni4, 17 май 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    181
    Симпатии:
    7
    Ребята подскажите пожалуйста

    как реализовать:
    чтобы при наведении на картинку всплывал div блок с текстом

    как тут реализовано:
     
  2. Горбушка

    Горбушка Ищу её...

    Регистр.:
    2 май 2008
    Сообщения:
    3.036
    Симпатии:
    2.039
    Писать код не буду, смысл:
    Делаем <li>, внутри картинку и текст. Дальше скрываем див и показываешь img...
    Прописываем li:hover показ дива и скрытие картинки...

    Как-то так...

    Но можно на JS сделать интереснее и красивее...
     
  3. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    На чистом css:

    http://beloweb.ru/novichkam/plavnaya-animatsiya-obektov-tolko-s-pomoshhyu-css.html
    Demo: http://beloweb.ru/demo/cssanimation/

    Берёшь первый вариант, в качестве первого бекграунда - своя картинка.
     
  4. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    181
    Симпатии:
    7
    В общем почистил код примера который давал в 1ом посту
    получилось голыми средствами css без js, кому надо можете переделать под себя

    HTML
    Код:
    <html>
    <head>
    <title>При наведении на картинку появляется текст</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
    
    <ul class="posts-grid row-fluid unstyled news">
        <li class="span4">
            <div class="thumb-wrap">
                <figure class="featured-thumbnail thumbnail"><a href="/" title="Mauris accuml dia in" rel="prettyPhoto-326919573"><img src="http://livedemo00.template-help.com/wordpress_47020/wp-content/uploads/2013/09/img-10-370x367.jpg" alt="Mauris accuml dia in"></a></figure>
                <div class="desc">
                    <div class="inner">
                        <h5>Заголовок 1</h5>
                        <p class="excerpt">Тут всякий текст... </p>
                        <a href="/" class="btn btn-link btn-normal" title="Mauris accuml dia in">Узнать больше</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    
    </body>
    </html>
    CSS
    Код:
    .posts-grid {
        margin:0 0 43px 0;
    }
    .posts-grid.no-thumbnail { margin-bottom:0; }
    .posts-grid.no-thumbnail li { margin-bottom:0; }
    .posts-grid.no-thumbnail .featured-thumbnail { display:none; }
    
    .posts-grid li { margin-bottom:45px; }
    .posts-grid li .featured-thumbnail { margin:0 0 15px 0; }
    .ie8 .posts-grid li .featured-thumbnail { float:none; }
    .posts-grid li .featured-thumbnail img { width:100%; }
    .posts-grid h5 {
        font-size:25px;
        line-height:1.2em;
        margin-bottom:2px;
    }
    .posts-grid h5 a {
        color:#ffffff;
        -webkit-transition:0.3s;
        -moz-transition:0.3s;
        -o-transition:0.3s;
        transition:0.3s;
    }
    .posts-grid h5 a:hover, .posts-grid h5 a:active, .posts-grid h5 a:focus {
        text-decoration:none;
        color:#566f0e;
    }
    
    .posts-grid.news { margin-bottom:0; }
    .posts-grid.news li { margin-bottom:45px; }
    .posts-grid.news .featured-thumbnail { margin:0; }
    .ie8 .posts-grid.news .featured-thumbnail { float:none; }
    .posts-grid.news .featured-thumbnail img { width:100%; }
    .posts-grid.news .thumb-wrap {
        position:relative;
        overflow:hidden;
    }
    
    .posts-grid.news .thumb-wrap:hover .desc {
        opacity:1;
        filter:alpha(opacity=100);
    }
    .ie8 .posts-grid.news .thumb-wrap:hover .desc { visibility:visible; }
    .posts-grid.news .desc {
        color:#fff;
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        background-color:#282a2e;
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transition:0.3s;
        -moz-transition:0.3s;
        -o-transition:0.3s;
        transition:0.3s;
    
        height:298px;
    }
    .ie8 .posts-grid.news .desc {
        filter:none !important;
        visibility:hidden;
    }
    .posts-grid.news .desc .inner {
        border:15px solid #282a2e;
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        padding:38px 55px 0 16px;
    }
    
    
    .ie8 .posts-grid.news .desc .inner { padding:8px 16px 0 16px; }
    .posts-grid.news .desc h5 {
        font-size:18px;
        margin-bottom:17px;
        color:#fff;
    }
    
    .ie8 .posts-grid.news .desc h5 { margin-bottom:7px; }
    .posts-grid.news .desc .btn-link { color:#ffffff; }
    .posts-grid.news .desc .btn-link:before {
        content:'\f055';
        font-family:FontAwesome;
        font-size:14px;
        display:inline-block;
        vertical-align:top;
        margin-right:9px;
        color:#ffffff;
    }
    .posts-grid.news .desc .btn-link:hover { color:#566f0e !important; }
    .posts-grid.news .desc .btn-link:hover:before { color:#ffffff; }
    .posts-grid.news .desc .excerpt { margin-bottom:27px; }
    
    
    .ie8 .posts-grid.news .desc .excerpt {
        font-size:13px;
        margin-bottom:15px;
    }
    .row-fluid .span4 {
        width: 300px;
        height:298px;
    }
    
     
    Горбушка нравится это.