Menu
I added a effect to image in post and when I add the effect, all posts crash.Can you look at my code to see my mistake? I think it is completly css issue and my css is not good.You can see that posts overflow from their card on the link :
“`
<style>
h1{
text-align:center;
margin-bottom:50px;
margin-top:50px;
}
.blog-card-blog {
margin-top: 30px;
}
.blog-card {
display: inline-block;
position: relative;
width: 100%;
margin-bottom: 30px;
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card .blog-card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: 6px;
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.blog-card .blog-card-image img {
width: 100%;
height: 100%;
border-radius: 6px;
pointer-events: none;
}
.blog-card .blog-table {
padding: 15px 30px;
}
.blog-table {
margin-bottom: 0px;
}
.blog-category {
position: relative;
line-height: 0;
margin: 15px 0;
}
.blog-text-success {
color: #28a745!important;
}
.blog-card-blog .blog-card-caption {
margin-top: 5px;
}
.blog-card-caption {
font-weight: 700;
font-family: “Roboto Slab”, “Times New Roman”, serif;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.blog-card-caption, .blog-card-caption a {
color: #333;
text-decoration: none;
}
p {
color: #3C4857;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
.blog-card .ftr {
margin-top: 15px;
}
.blog-card .ftr .author {
color: #888;
}
.blog-card .ftr div {
display: inline-block;
}
.blog-card .author .avatar {
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;blog-
}
.blog-card .ftr .stats {
position: relative;
top: 1px;
font-size: 14px;
}
.blog-card .ftr .stats {
float: right;
line-height: 30px;
}
</style>
<style>
body {
background: black;
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: ‘feathericons’;
src:url(‘../fonts/feathericons/feathericons.eot?-8is7zf’);
src:url(‘../fonts/feathericons/feathericons.eot?#iefix-8is7zf’) format(’embedded-opentype’),
url(‘../fonts/feathericons/feathericons.woff?-8is7zf’) format(‘woff’),
url(‘../fonts/feathericons/feathericons.ttf?-8is7zf’) format(‘truetype’),
url(‘../fonts/feathericons/feathericons.svg?-8is7zf#feathericons’) format(‘svg’);
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;
width: 48%;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/* Individual effects */
/*—————*/
/***** Ruby *****/
/*—————*/
figure.effect-ruby {
background-color: #17819c;
}
figure.effect-ruby img {
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
figure.effect-ruby:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-ruby h2 {
margin-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-ruby p {
margin: 1em 0 0;
padding: 3em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-ruby:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-ruby:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
@media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<!– <div class=”col-md-2″> –>
<div class=”blog-card blog-card-blog col-md-4″ style=”height: 100vh;”>
<div class=”blog-card-image”>
<!– <a href=”#”> <img class=”img” src=<?php //the_post_thumbnail(); ?>> </a> –>
<div class=”grid”>
<figure class=”effect-ruby”>
<img src=”http://menlike.club/wp-content/uploads/2015/05/tumblr_nnpudcxIXt1r98nzso1_1280.jpg” alt=”img13″/>
<figcaption>
<h2>Glowing <span>Ruby</span></h2>
<p>Ruby did not need any help. Everybody knew that.</p>
<a href=”#”>View more</a>
</figcaption>
</figure>
</div
<?php the_post_thumbnail(‘medium’, array(‘class’ => ‘img’)); ?>
<div class=”ripple-cont”></div>
</div>
<div class=”blog-table”>
<h6 class=”blog-category blog-text-success”><i class=”far fa-newspaper”></i> News</h6>
<h4 class=”blog-card-caption”>
<a href=”#”><?php the_title(); ?></a>
</h4>
<p class=”blog-card-description”>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<div class=”ftr”>
<div class=”author” >
<!– <a href=”#”> <img src=”https://picsum.photos/id/1005/5760/3840″ alt=”…” class=”avatar img-raised”> <span>Lorem</span> </a>
–> </div>
<div class=”stats”> <i class=”far fa-clock”></i> 10 min </div>
</div>
</div>
</div>