WANASEOBY: December 2012

12/23/2012

Add Image border to your blog post image

12/23/2012

This tutorial was requested by someone. This is the live preview of the image. Not all images in your blog will have border, just images in your entry.

Go to Home > Template > Edit HTML > Search for ]]></b:skin>
Paste the codes given above/before ]]></b:skin>

.post-body img{
padding:4px;
border:1px solid #ddd}

Thank you for reading :)

How to style your post blockquote - Style 8

Demo :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Codes:

Blogskins/ Classic template : Paste codes ni sebelum code </style>
Template designer : Paste codes ni sebelum ]]></b:skin>
Remove semua code berkaitan dengan blockquote untuk mengelakkan kekacauan antara code. lol :B

Blockskins/Classic Template : Paste the codes before </style>
Template designer : Paste the codes before ]]></b:skin>
Remove all any other codes that related to blockquote

12/18/2012

Simple Template : Comment Box Styling

12/18/2012

LIVE PREVIEW

Assalamualaikum,

Saya sedang menjinakkan diri di dalam simple template setelah sekian lama tak sentuh Simple Template ni. Baruku sedar edit simple template ni senang jugak tapi lebih complicated dari classic template. Code ni semua saya type sendiri /serious/ so sila hargai lah ye ;__;

Nak Comment Box macam tu? Ikut instruction ni -

Pergi ke Dashboard > Settinng > Post and Comments > Coment location > Pilih Embedded
Pergi ke Blogger Dashboard > Template > Edit HTML
Cari code .post {
Paste codes yang saya bagi ni dekat ATAS .post{ tadi.

.comment-content{
background:#FFE2E2;
padding:13px;
border-radius:30px;
color:#666;}

h4{
background:#D1F4FE;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;}


@font-face{
font-family:ttn;
src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
}

.comment-block{background:#FEF3F3; 
padding:10px;
border-radius:30px;
border:3px dashed #FEE8E8}

.avatar-image-container{background:#FFE2E2;padding:5px;border-radius:50%;}


.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}

.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}


.datetime{
background:#fff;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:10px;}

.secondary-text{
padding:8px;
background:#fff;
border-radius:30px;
float:right;
border:2px solid #FEE8E8;
}

Warna text, background semua pandai-pandai lah ubah eh ^-^
Kalau dah siap, Preview . Save

Goodluck mencuba. Kalau tak jadi usaha lagi muahaha.
P/s : Thanks kepada Cik Nad kerana sudi tolong komen "test test test" XD

12/14/2012

How to make polaroid style image

12/14/2012

Hi, in this entry I will give you the codes for creating a polaroid image using coding. This is the live preview of the polaroid box.

I know you tried to be someone else when you're with me. Trust me, i love you the way you are.

<style>
  .polaroid{
    font:10px arial;
    line-height:12px;
    letter-spacing:1px;
    color:#aaa;
    text-align:justify;
    background:#F6F6F6;
    padding:5px;
    width:290px;
    height:230px;
    box-shadow:0px 0px 5px #ddd;}
 
</style>

<div class="polaroid">
<img src="image url" style="margin-bottom:10px;">text</div>

Yes you can edit everything including width, shadow colors, and background. Replace "image url" to your own image url.

12/09/2012

Tutorial List With Special Hover

12/09/2012

In this post, I would like to teach you on how to get this cute Tutorial list, I specially made this for tutorial list, but you can also use this for any other list with link. Please hover the list below to see he effect.

Tutorial : Navigation Tutorial : Background Tutorial : Cara mengorat kevin dengan mudah Tutorial : Hahahahahahaha Tutorial : Gurau je ehhh XD

Edit the list in http://htmledit.squarefree.com/ and then paste the codes in HTML section in you new page.

<style type="text/css">
a.tutorial-list{
background:url(http://media.tumblr.com/tumblr_m46ludgD2k1qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
padding-left:25px;
color:#444;
margin-bottom:2px;
font:12px arial;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color:#999;
display:block;
}


a.tutorial-list:hover{
background:url(http://media.tumblr.com/tumblr_m46ltvcl341qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
}

</style>

<a class="tutorial-list" href="LINK" >Tutorial :  </a>
<a class="tutorial-list" href="LINK" >Tutorial :  </a>
<a class="tutorial-list" href="LINK" >Tutorial :  </a>
<a class="tutorial-list" href="LINK" >Tutorial :  </a>
<a class="tutorial-list" href="LINK" >Tutorial :  </a>

12/05/2012

How to style link hover - Style 8

12/05/2012

To use this link hover, paste the codes under </style> for Classic Template users. For Blogger Template Designer, paste the codes above/before ]]></b:skin>

I feel like I'm under a spell

a{
text-decoration:none ;
color:#BDA291 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; 
}

a:hover{
color:#fff ;
background:url(http://24.media.tumblr.com/tumblr_m1f2u4jjAC1qbc0uoo1_500.jpg);
background-position:50% 80%;
background-size:400px;
}

How to Add Circle Box with Hover Effect to your blog - Style 4

Assalamualaikum, this tutorial is requested. At first, I was hesitated to post this tutorial as the codes are not mine. But I understand that many of you guys don't really understand on how to use the codes by that website. Don't worry it was hard for me too. This tutorial are belongs to: Owner

Click here too see Live Preview

I have provided the codes below. Edit the codes in http://htmledit.squarefree.com/ and then paste them in where ever you wanted them to be. Both classic template and Blogger new template designer can use this box.

<center><style type="text/css">.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}

.ch-info-wrap, 
.ch-info{
 position: absolute;
 width: 280px;
 height: 280px;
 border-radius: 50%;
 
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 
 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -o-perspective: 800px;
 -ms-perspective: 800px;
 perspective: 800px;
}

.ch-info-wrap {
 top: 20px;
 left: 20px;
 background: #f9f9f9 url(../images/bg.jpg);
 box-shadow: 
  0 0 0 20px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(115,114, 23, 0.8);
 
}

.ch-info {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-front {
 -webkit-transform-origin: 50% 100%;
 -moz-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 
 z-index: 100;
 box-shadow: 
  inset 2px 1px 4px rgba(0,0,0,0.1);
}

.ch-info .ch-info-back {
 background: rgba(230,132,107,0);
}

.ch-img-1 { 
 background-image: url(http://24.media.tumblr.com/tumblr_mb4006VUGv1rbavh7o1_500.png);
}

.ch-item:hover .ch-info-front {
 -webkit-transform: rotate3d(1,0,0,-180deg);
 -moz-transform: rotate3d(1,0,0,-180deg);
 -o-transform: rotate3d(1,0,0,-180deg);
 -ms-transform: rotate3d(1,0,0,-180deg);
 transform: rotate3d(1,0,0,-180deg);
 
 box-shadow: 
  inset 0 0 5px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
 background:#F0ECE6;
}

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}

</style>

<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
content here
</div>
</div>
</div>
</div>
</li>
</ul>
</center>

How to add Circle Box with Hover Effect to your blog - Style 3

Click here too see Live Preview

<center>
<style type="text/css">
.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}

.ch-info-wrap{
 position: absolute;
 width: 280px;
 height: 280px;
 border-radius: 50%;

 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -o-perspective: 800px;
 -ms-perspective: 800px;
 perspective: 800px;

 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

 top: 20px;
 left: 20px;
 background: #222;
 box-shadow: 
  0 0 0 20px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info{
 position: absolute;
 width: 280px;
 height: 280px;
 border-radius: 50%;

 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
  
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;

}

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;

 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
}

.ch-info .ch-info-back {
 -webkit-transform: rotate3d(0,1,0,180deg);
 -moz-transform: rotate3d(0,1,0,180deg);
 -o-transform: rotate3d(0,1,0,180deg);
 -ms-transform: rotate3d(0,1,0,180deg);
 transform: rotate3d(0,1,0,180deg);
 background: #fff;
}

.ch-img-1 { 
 background-image: url(http://25.media.tumblr.com/tumblr_m8ns2sUEls1r0yfa8o1_500.png);background-size:500px;
}

.ch-item:hover .ch-info-wrap {
 box-shadow: 
  0 0 0 0 rgba(255,255,255,0.8), 
  inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
 -webkit-transform: rotate3d(0,1,0,-180deg);
 -moz-transform: rotate3d(0,1,0,-180deg);
 -o-transform: rotate3d(0,1,0,-180deg);
 -ms-transform: rotate3d(0,1,0,-180deg);
 transform: rotate3d(0,1,0,-180deg);
}

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
</style>

<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
content here
</div>
</div>
</div>
</div>
</li>
</ul>
</center>

12/04/2012

How to Add Circle Box with Hover Effect to your blog - Style 2

12/04/2012

Click here too see Live Preview

<center>
<style type="text/css">

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: absolute;
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 
 -webkit-transform-origin: 95% 40%;
 -moz-transform-origin: 95% 40%;
 -o-transform-origin: 95% 40%;
 -ms-transform-origin: 95% 40%;
 transform-origin: 95% 40%;
 
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.ch-thumb:after {
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 border-radius: 50%;
 top: 40%;
 left: 95%;
 margin: -4px 0 0 -4px;
 background: rgb(14,14,14);
 background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 box-shadow: 0 0 1px rgba(255,255,255,0.9);
}


.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 background: #c9512e url(http://pastelpatterns.com/small/smallpattern-11.png);
 box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 18px;
 margin: 0 60px;
 padding: 22px 0 0 0;
 height: 85px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
  0 0 1px #fff, 
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: #333;
 width: 80px;
 height: 80px;
 background: rgba(255,255,255,0.3);
 border-radius: 50%;
 color: #fff;
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 24px;
 margin: 7px auto 0;
 font-family: 'Open Sans', Arial, sans-serif;
 opacity: 0;
 
 -webkit-transition: 
  -webkit-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -moz-transition: 
  -moz-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -o-transition: 
  -o-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -ms-transition: 
  -ms-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 transition: 
  transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
  
 -webkit-transform: translateX(60px) rotate(90deg);
 -moz-transform: translateX(60px) rotate(90deg);
 -o-transform: translateX(60px) rotate(90deg);
 -ms-transform: translateX(60px) rotate(90deg);
 transform: translateX(60px) rotate(90deg);
  
 -webkit-backface-visibility: hidden;
}

.ch-info p a:hover {
 background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
 -webkit-transform: rotate(-110deg);
 -moz-transform: rotate(-110deg);
 -o-transform: rotate(-110deg);
 -ms-transform: rotate(-110deg);
 transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
 opacity: 1;
 -webkit-transform: translateX(0px) rotate(0deg);
 -moz-transform: translateX(0px) rotate(0deg);
 -o-transform: translateX(0px) rotate(0deg);
 -ms-transform: translateX(0px) rotate(0deg);
 transform: translateX(0px) rotate(0deg);
}.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

.ch-img{ 
 background-image: url(http://25.media.tumblr.com/tumblr_mcq4chpZRN1qfqm2lo1_500.jpg);
background-position:50% 50%;
background-size:450px;
}

.ch-info {
 position: absolute;
 background: url(http://25.media.tumblr.com/tumblr_lyjn8soO2W1ro1s33o1_500.jpg);background-position:50% 50%;
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 
 -webkit-backface-visibility: hidden;

}

.ch-item:hover {
 box-shadow: 
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}

</style> 
<ul class="ch-grid">
<li><div class="ch-item">
<div class="ch-info">
<p>
<center>
<div style="margin-top:50px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBnTl-3vzPqWE_R_OxB2686MRB74ALO2Yc4jBZYiKvcStSX9wUgnTxPBw_DvMr2SIIwGX4VskSCS_8G2Cy8eoArVaFqgy4oGQGBcMCvkF3-XSjKf8bmHKXYSxDDJeHqRNpuJXdCJoAvE_/s1600/bodybg.gif); border-radius:10px;">
anything here
</div>
</center>
</p>
</div>
<div class="ch-thumb ch-img">
</div>
</div>
</li>
</ul>
</center>

12/02/2012

How to Add Circle Box with Hover Effect to your blog - Style 1

12/02/2012

Click here too see Live Preview

<style type="text/css">
.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
  
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

.ch-img{ 
 background-image: url(http://25.media.tumblr.com/tumblr_m7qa9yxlUR1r5ei3ho1_500.jpg);
background-position:50% 50%;
background-size:500px;
}

.ch-info {
 position: absolute;
 background: url(http://25.media.tumblr.com/tumblr_lyjn8soO2W1ro1s33o1_500.jpg) D9E8FC;background-position:50% 50%;
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 
 -webkit-backface-visibility: hidden;

}


.ch-item:hover {
 box-shadow: 
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

.ch-item:hover .ch-info p {
 opacity: 1;
}

</style> 
<ul class="ch-grid">
<li><div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:80px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBnTl-3vzPqWE_R_OxB2686MRB74ALO2Yc4jBZYiKvcStSX9wUgnTxPBw_DvMr2SIIwGX4VskSCS_8G2Cy8eoArVaFqgy4oGQGBcMCvkF3-XSjKf8bmHKXYSxDDJeHqRNpuJXdCJoAvE_/s1600/bodybg.gif); border-radius:10px;text-align:left;padding:5px;">
anything here 
<br/></div>
</center>
</div>
</div>
</li>
</ul>

Thank you for using.