CSS наведите курсор на миниатюры в WordPress - PullRequest
Новая
       22

CSS наведите курсор на миниатюры в WordPress

0 голосов
/ 24 августа 2011

Я пытаюсь создать сетку миниатюр в WordPress, что мне удалось сделать. Затем, когда пользователь наводит курсор на изображение, я хочу, чтобы оно стало полупрозрачным и показывало заголовок поста внизу. Я думаю, что я начал как-то разбираться с кодом, но в настоящее время всплывающая подсказка появляется под изображением, а не поверх эскиза. Мне было интересно, может ли кто-нибудь помочь мне с этим? Я думаю, что проблема заключается в CSS. Я попробовал положение: абсолютное, но оно просто прилипло к вершине сетки. 

<div id="gridContainer">
<?php
$c = 1; //init counter
$bpr = 3; //boxes per row
if(have_posts()) :
    while(have_posts()) :
        the_post();
?>


<div class="post" id="post-<?php the_ID(); ?>">


<div class="postImage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('grid-post-image'); ?></a>
</div>

<div class="hover">
                <h1 class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
            </div>
            </div>


<?php
if($c == $bpr) :
?>
<div class="clr"></div>
<?php
$c = 0;
endif;
?>
<?php
        $c++;
    endwhile;
endif;
?>
<div class="clr"></div>
</div>

А вот CSS, который, я думаю, нужно изменить. 

.post {
    float: left;
    width: 275px;
}

.clr {
    clear:both;
}


.hover {
      width: 275px;
   height: 185px;
    top: 0;
    z-index: 1;
        background: #fff;
      opacity:0;
}

.hover:hover{
      opacity:0.9;
}

1 Ответ

1 голос
/ 24 августа 2011 
<style>
    .postImage{position:relative;}
    .postImage>a{position:absolute; top:0; left:0; z-index:0;}
    .postImage>h1{display:none; position:absolute; top:50%; left:0; z-index:1;}
    .postImage:hover img{opacity:0.5;}
    .postImage:hover h1{display:block;}
</style>

Поместите оба элемента (изображение и h1) в один div 

<div class="postImage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('grid-post-image'); ?></a>
    <h1 class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
</div>
...