наведите курсор на изображение, разверните скрытый div

Я видел их на многих сайтах. В принципе, я создаю портфолио, и у меня есть несколько divs (квадраты в формате сетки), показывающие скриншоты моих проектов. Я хочу иметь возможность нависнуть над каждым проектом с помощью мыши, которая, в свою очередь, будет скользить в ранее скрытом div, раскрывая конкретную информацию об этом конкретном проекте.наведите курсор на изображение, разверните скрытый div

В принципе, я ищу что-то простое, как это: http://iamyuna.com/

Обратите внимание, если вы наведите курсор мыши на каждую форму (т.е. проект), он быстро «разворачивает», чтобы показать другое изображение внизу. Это может быть неудачным примером, поскольку я хочу, чтобы описание отображалось вместо другого изображения. Тем не менее, мне нравится, как быстро он разворачивается, чтобы показать скрытый контент.

Ниже приведено описание моего html. Можно ли реализовать что-то подобное для моей собственной работы? Если вы, ребята, можете помочь мне начать с этого или предложить ключевые слова, чтобы начать (я искал учебник в течение нескольких часов, но не могу найти его), я бы очень признателен. Спасибо.

<article class="project" data-id="248"> 
    <div class="project-mask"> 
     <div class="thumbnail"> 
      <img src="image.jpg"> 
      <div class="description"> 
        <h2>Title</h2> 
        <p>Description</p> 
      </div> 
     </div> 
    </div> 
</article>

источник

2013-04-29 J82

Это было бы проще в CSS. Поместите слой сверху, который имеет:: hover {display: none; } ' Если вы хотите эффект перехода, взгляните на [это] (http://www.w3schools.com/css3/css3_transitions.asp) –

Варах базовую реализацию:

$('.thumbnail').hover(function() { 
    $('.description', this).stop().animate({ 
     bottom: 0 
    }, 200); 
}, function() { 
    $('.description', this).stop().animate({ 
     bottom: -100 
    }, 200); 
});

Демо: http://jsfiddle.net/LAkmA/

источник

2013-04-29 20:46:47 dfsq

Точно, что я искал, спасибо! Но можете ли вы объяснить, почему '.description' установлен как' bottom: -105px' вместо 'bottom: 100px'? – J82

Должен ли я поставить jQuery между '$ (document) .ready (function ($) {' and '});'? – J82

Это просто быстрый пример, поэтому он не идеален, дно должно быть '-100px', конечно. Вы можете поместить свой код между '$ (function() {...})', чтобы убедиться, что код выполняется при загрузке дерева DOM. Или вы также можете поместить скрипт в конец тела, чтобы он продолжался, тогда вам не нужно '$ (function() {...})'. – dfsq

Вы можете сделать это только в CSS с чем-то вроде этого:

.thumbnail img { display:block; } 
.thumbnail div.description { display:none; } 

.thumbnail:hover img {display:none; } 
.thumbnail:hover div.description {display:block; }

источник

2013-04-29 20:45:09 Indigenuity

<script type="text/javascript"> 
$(".thumbnail img").hover(function(){ $(".description").css("display", "block"); }, function(){ $(".description").css("display", "none");}); 
</script>

Примечание: это выполняется с помощью jQue чень и вам необходимо установить дисплей .description к ни

также было бы гораздо лучше использовать идентификаторы вместо классов, и это будет что-то вроде:

<script type="text/javascript"> 
$("#IMG1").hover(function(){ $("#DESC1").css("display", "block"); }, function(){ $("#DESC1").css("display", "none");}); 
</script>

, а затем вы можете превратить это в функции и т.д.

PS: Снова это использует JQuery, так что вы должны реализовать его в головной части (предпочтительно) и перед этим кодом все равно

источник

2013-04-29 20:49:43

наведите курсор на изображение, разверните скрытый div

ответ

Смежные вопросы