اضافة تأثير flip down علي الصورة

اضافة تأثير flip down علي الصورة

السلام عليكم

اليوم ان شاء الله شرح طريقة اضافة تأثير flip down علي الصورة

بحيث عند عمل Hover للصور تظهر العنوان والوصف بالاضافة الي زر جميل اسفل الصورة

في شاشة مزدوجة بحجم الصورة

للمعاينة

هام : حجم الصورة يجب ان يكون عرض px 400 - طول 300 px

طريقة الاضافة

اولا توجة الي قالب مدونتك ثم ابحث عن هذا الكود :

 </head>

ضع فوقة هذا الكود:

 <script src="https://googledrive.com/host/0B30379AIS0OdZEE5TkRyOW8zZGs/"></script>

ثانيآ ابحث عن هذا الكود :

 </body>

ضع فوقة هذا الكود :

 <script src="https://googledrive.com/host/0B30379AIS0OdME1DWVU1cmlSV2s/"></script>

ثالثا ابحث عن هذا الكود :

 ]]></b:skin>

ضع فوقة هذا الكود :

 /*BloggerAdd.com - تأثيرات علي الصور*/
.baestyleimg *, .baestyleimg *:after, .baestyleimg *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.baestyleimg a {
color: #888;
text-decoration: none;
}
.baestyleimg a:hover,
.baestyleimg a:active {
color: #333;
}
.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: right;
position: relative;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
max-width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}
.grid figcaption span:before {
content: '';
}
.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
/* Individual Caption Styles */
/* Caption Style 7 */
.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }
.cs-style-7 figure img {
z-index: 10;
}
.cs-style-7 figcaption {
height: 100%;
width: 100%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
-moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
box-shadow: 0 0 0 0px #2c3f52;
}
.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
opacity: 1;
height: 130%;
box-shadow: 0 0 0 10px #2c3f52;
}
.cs-style-7 figcaption h3 {
margin-top: 86%;
}
.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
opacity: 0;
-webkit-transition: opacity 0s;
-moz-transition: opacity 0s;
transition: opacity 0s;
}
.cs-style-7 figcaption a {
position: absolute;
bottom: 20px;
left: 20px;
}
.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
-webkit-transition: opacity 0.3s 0.2s;
-moz-transition: opacity 0.3s 0.2s;
transition: opacity 0.3s 0.2s;
opacity: 1;
}
@media screen and (max-width: 31.5em) {
.grid {
padding: 10px 10px 100px 10px;
}
.grid li {
width: 100%;
min-width: 300px;
}
}
/*BloggerAdd.com - تأثيرات علي الصور*/

وأخيرآ كود HTML :

يتم وضع هذا الكود في المكان الذي تريد

 <div class="baestyleimg">
<ul class="grid cs-style-7">
<li>
<figure>
<img src="https://2.bp.blogspot.com/-EisXaG99ZGs/VmC5Xyhla0I/AAAAAAAAA18/L7-FGYKNJzw/s2650/4.png" alt="alt الصورة">
<figcaption>
<h3>نص العنوان</h3>
<span>هنا ضع وصف قصير</span>
<a href="#">اقرأ المزيد</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://1.bp.blogspot.com/-wKJl6kvYSZs/VmC5YP7fNgI/AAAAAAAAA14/c2cj2f4okF8/s2650/5.png" alt="alt الصورة">
<figcaption>
<h3>بلوجر ادد</h3>
<span>هي مدونة عربية تهتم مدون بلوجر</span>
<a href="#">اقرأ المزيد</a>
</figcaption>
</figure>
</li>
</ul>
</div>

اي دعم او مساعدة او تعديل ,, سيب سؤالك في التعليقات .. السلام