Add your
blog Stylish Sliding Up Image Description 300x270 Sliding Up Image Description
(floating details)
I hope you'll understand this time
Let's begin time,
At first, know your Blogger's Dashboard, then click on Add Gadget in Layout to HTML / Javascript select
Copy and paste this occasion I would like to kodagula given below
<style>
. Image-box {
width: 280px; height: 280px; overflow: hidden; background-color: white;
border: 1px solid # ccc; float: left; margin: 1px 1px;
font: normal normal 12px/1.4 Segoe, "Segoe UI", Arial, Sans-Serif;
color: # 333;
I hope you'll understand this time
Let's begin time,
At first, know your Blogger's Dashboard, then click on Add Gadget in Layout to HTML / Javascript select
Copy and paste this occasion I would like to kodagula given below
<style>
. Image-box {
width: 280px; height: 280px; overflow: hidden; background-color: white;
border: 1px solid # ccc; float: left; margin: 1px 1px;
font: normal normal 12px/1.4 Segoe, "Segoe UI", Arial, Sans-Serif;
color: # 333;
}
. Image-container,
. Image-details {height: 280px; border: 5px solid white; background-color: # ffc;
transition: margin-top .4 s ease-out .4 s;
}
. Image-container img {
width: 280px; height: 280px; padding: 0 0; margin: 0 0; border: none; outline: none; max-width: none;
max-height: none;
background-color: black;
}
. Image-details h4,
. Image-details p {
margin: 0 0 .2 em; padding: 0 0; height: 70px;
}
. Image-details h4 {
font-size: 120%; height: auto;
}
. Image-details. Details {
padding: 10px 12px; overflow: hidden;
}
. Image-details. More {
color: white; text-decoration: none; display: block;
text-align: center; font-weight: bold; background-color: # f9a; height: 26px; line-height: 26px; margin: 10px 0 0;
}
. Image-box: hover {border-color: # bbb; width: 280px;
height: 280px;}
. Image-box: hover. Image-container {margin-top:-160px}
. Image-details. More: hover {background-color: black}
</ Style>
<div id="image-box-wrapper">
<div>
<div>
<img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-7DK-XQa89NB-DWfWd7R3U_1-JxZ9WRKgH3kd2pTJPzSSuT5eCCY9uTvsWl2_wLWJEtVz3buzHzTYE2hyphenhyphenhVATQKNSt2FHPUdgGcEULQ4wtxZUcA7H8SOy6itferY0SZf3JBw7ySNtpOQ/s1600/3.jpg" alt="Food">
</ Div>
<div>
<div>
<h4> Lorem Ipsum </ h4>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ... </ p>
<p> <a href="Post Link "> More </ a> </ p>
</ Div>
</ Div>
</ Div>
<div style="clear:both;"> </ div>
</ Div>
Save time.
Comments
Post a Comment