photo css effect for blogger

ဓါတ္ပံု effect

4wadi.blogspot.com

မိမိ၏ ဘေလာ့တြင္ ဓါတ္ပံုေလးေတြကို Effect လွလွေလးႏွင့္ တင္လိုသူမ်ားအတြက္ တင္ေပးလိုက္ပါတယ္။နမူနာ အား ယၡဳပံုတြင္ ၾကည့္ရႈႏိုင္ပါတယ္

CSS code

@import url(http://fonts.googleapis.com/css?family=Neucha);

@import url(http://fonts.googleapis.com/css?family=Medula+One);

.photo_container.turn {
  perspective: 800px;
  position: relative;
}

.photo_container.turn{
  background: #084138;
  border: 10px solid #000;
  border-radius: 6px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  width: 500px;
}

.photo_container.turn .label {
  color: #fff;
  font-family: 'Neucha', sans-serif;
  font-size: 28px;
  left: 20px;
  letter-spacing: 6px;
  opacity: 1;
  position: absolute;
  text-shadow: 0 0 10px #000;
  top: 14px;
  z-index: 9999;
}

.photo_container.turn img {
  height: 520px;
  margin: -10px 0 0 -10px;
  width: 520px;
}

.photo_container.turn .front,
.photo_container.turn .back{
  left: 0;
  position: absolute;
  top: 0;
}

.photo_container.turn .front{
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  z-index: 999;
}

.photo_container.turn .back{
  opacity: 1;
  position: relative;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.photo_container.turn .description_container {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .front,
.photo_container.turn:hover .front{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .back,
.photo_container.turn:hover .back{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn .description {
  color: #fff;
  text-align: left;
}

.photo_container.turn .description .photo_title{
  border-bottom: 4px solid #fff;
  font-family: 'Medula One', serif;
  font-size: 48px;
  margin: 100px 20px 10px 20px;
  padding-bottom: 10px;
}

.photo_container.turn .description p{
  font-family: 'Medula One', serif;
  font-size: 24px;
  margin: 0;
  padding: 20px;
}

html code

<div class="photo_container turn">
  <div class="label">အေၾကာင္းအရာ</div>
  <img src="http://ibrahimjabbari.com/images/stories/effect3.jpg" class="front" />
  <div class="description back">
    <div class="description_container">
      <div class="photo_title">အေၾကာင္းအရာ ေခါင္းစဥ္</div>
      <p>အေၾကာင္းအရာ စာကို ထည့္ပါ </p>
    </div>
  </div>
</div>

မိမိ ဘေလာ့မွာ အလွဆင္လိုသူမ်ား အလွဆင္ႏိုင္ေအာင္ တင္ေပးလိုက္ပါတယ္။
Css code  ကို္ေတာ့ Template>>customize>> add css မွာ ထည့္ရမွာပါ။
Html ကိုေတာ့ ကိုယ္ Post တင္တဲ့ အခ်ိန္မွာ အသံုးျပဳရမွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ.။