Wordpress Loop - опрокидывание изображений

Question

У многих людей есть Wordpress. Я пытаюсь настроить код в цикле, так что эскизы отображаются три вещей по наведению:

1. ДОЛЖНОСТИ
2. Двадцать слов содержания с «читать далее» ссылка
3. Даты размещения

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

Любая помощь будет оценена по достоинству. Благодаря!

CSS:

.attach_hover { 
    opacity:1; 
    width:100%;} 
.attach_hover:hover { 
    opacity:.5; 
    background-color: white; 
    z-index:-3; 
} 
.attach_text { 
    color: red; 
    font-weight: bolder; 
    z-index:-1; 
    float:left; 
    width:75%; 
    text-align:left; 
    padding: 51px; 
} 

PHP/HTML:

<div class="row"> 
<?php 
$the_query = new WP_Query(array('post__not_in' => get_option('sticky_posts'))); 
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); 
?> 
<div class="col-sm-6" style="max-height:200px"> 
<h1><?php the_title(); ?></h1> 
<?php if(has_post_thumbnail()) {      
    $image_src = the_post_thumbnail('custom-size', array('class' => "attach_hover")); 
    echo '<img src="' . $image_src[0] . '" width="100%" />'; 
    echo '<a href="' . get_permalink($thumbnail->ID) . '" title="' . esc_attr($thumbnail->post_title) . '">'; 
    echo '</a>'; 
    $content = get_the_content(); 
    echo '<div class="attach_text">'; 
    $trimmed_content = wp_trim_words($content, 20, '<a href="'. get_permalink() .'"> ...Read More</a>'); 
    $the_title = get_the_title(); 
    echo $trimmed_content; 
    echo '</div>'; 
}?> 
      </div><div class="col-sm-6" style="max-height:200px;"> 
<h4>Posted on <?php the_time('F jS, Y') ?></h4> 
      </div> 
<hr> <?php endwhile; else: ?> 

Answer 1

Фигурные это! разорванного изображения идет отсюда:

echo '<img src="' . $image_src[0] . '" width="100%" />'; 

Я также необходим абсолютное позиционирование для контейнера, который показывает на парения (.posttext), и я должен был устранить вторую линию отзывчивых бутстраповских строительных лесов. Это было сужая все в одну колонку:

<div class="col-sm-6" style="max-height:200px;">. 

Наконец, я добавил р класса заданий к элементам .posttext. Это .posthead .postdate и .postcontent. Голова, дата и содержание все имели позицию в контейнере.

Он все еще может использовать тонкую настройку, но это функциональное/отзывчивое расположение, что позволяет парить над почтовыми вложениями в цикле и раскрыть: 1. Название сообщения 2. Двадцать слов содержания с «читать далее» ссылку 3. Дата размещения

---

CSS:

.row { 
    clear: both;} 
.postloop { 
    opacity:1; 
    width: 100%; 
    height: auto; 
    padding: 5px 0 5px 0; 
} 
.posttext { 
    color: gray; 
    font-size: 100%; 
    z-index:3; 
    width: 96%; 
    padding:5px 10px 5px 5px; 
    height: 100%; 
    display: block; 
    opacity: 0; 
    overflow: hidden; 
    border: 5px solid blue; 
    position: absolute; 
    background:rgb(255,255,255); 
    background: transparent\9; 
    background:rgba(255,255,255,0.9); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
    zoom: 1; 
     -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 
.posttext:hover { 
    opacity: 1; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 
.posthead{ 
    color: blue; 
    font-size: 150%; 
    font-weight: bolder; 
    float:left; 
    text-align:left; 
    margin-top: -2px; 
    width: 80%; 
    vertical-align: top; 
    display: block; 
    height: 60%; 
} 
.postdate{ 
    color:black; 
    float: right; 
    font-style: italic; 
    text-align: right; 
    width: 20%; 
    height: 60%; 
    vertical-align: top; 
    margin-top: -1px; 
    display: block; 
} 
.postcontent{ 
    color:black; 
     vertical-align: text-bottom; 
    vertical-align: bottom; 
    text-align: left; 
    margin-top: 50px; 
    width: 80%; 
    height: 40%; 
} 
.readmore { 
    float: right; 
    text-align: right; 
    vertical-align: text-bottom; 
    vertical-align: bottom; 
} 

PHP/HTML:

 <div class="row"> 
       <?php 
    $the_query = new WP_Query(array('post__not_in' => get_option('sticky_posts'))); 
    if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); 
    ?> 
      <div class="col-sm-6"> 
      <?php 
echo '<a href="' . get_permalink($thumbnail->ID) . '" title="' . esc_attr($thumbnail->post_title) . '">'; 
echo '<div class="posttext">'; 
echo '<p class="posthead">'; 
the_title(); 
echo '</p><p class="postdate">'; 
    the_date('F jS, Y'); 
echo '</p><p class="postcontent">'; 
    $content = get_the_content(); 
$trimmed_content = wp_trim_words($content, 10,"...".'<p class="readmore"> <a href="'. get_permalink() .'">Read More</a>'); 
echo $trimmed_content; 
echo '</p>'; 
echo '</div>'; 
echo '</a>'; 
    }?> 
       </div> 
    <?php endwhile; else: ?>