Jimdo sitenizde aşağıdaki önizleme kutucuklarından kullanmak için ilk kodu sitenizin Head bölümüne ikinci kodu ise bir bileşenler / HTML öğesi ile herhangi bir alt sayfaya yerleştirmeniz gerekir.
<style type="text/css">
/*<![CDATA[*/
.vbox {
background: #cedce7;
position: relative;
margin: 5px auto;
width: 297px;
height: 140px;
display: block;
filter:alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
-webkit-box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 3px 3px 3px 3px;
overflow:hidden;
}
.vbox .image {
position: absolute;
width: 297px;
height: 140px;
}
.vbox a, .vbox a:hover {
text-decoration: none;
}
.vbox .slogan {
position: absolute;
width: 297px;
height: 140px;
text-transform: uppercase;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.vbox .slogan {
background: #000;
top: 220px;
font-size: 16px;
color: #fff;
padding: 5px 0;
-webkit-box-shadow: 0 0 5px #333;
-moz-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}
.vbox:hover .slogan {
color: #fff;
top: 110px;
opacity: 0.7;
}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
.transparenz {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
opacity: .6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
filter: alpha(opacity=60); } /*IE7 und kleiner*/
.transparenz:hover {
opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
/*]]>*/
</style>
<div class="vbox">
<a href="BAĞLANTINIZ"><img class="transparenz" src="RESİM
BAĞLANTINIZ" alt=""
width="297" height="142" /></a>
<div class="slogan">
<center>
METNİNİZ
</center>
</div>
Kod ile ilgili soru ve yorumlarınızı buradan iletin.
Bünyamin BÜYÜKGÜÇLÜ (Saturday, 27 May 2017 18:22)
meerhaba
yc-server (Wednesday, 07 January 2015 09:34)
Merhaba Ben Bunun Boyutunu Ufaltmaya Çalıştım Fakat Yukarı Doğru Çıkan Yazı Hep Aynı Düzenleyip Mesaj Olarak Atabilirmisiniz ? 94x94 olmasını istiyorum
Dragoe (Wednesday, 24 December 2014 00:34)
yan yana birden fazla resim kullanılmıyor. eklendiğinde diğeri kayboluyor
dragoe (Monday, 22 December 2014 08:41)
hocam hallettim ama bunun tam tersini yapamazmıyız. yani mouse üstüne geldiğinde şeffaf olsa, diğer türlü normal olsa ?
dragoe (Monday, 22 December 2014 07:11)
tumblr blogunda yapmayı denedim fakat yapıştırdığım yer dışında gözüküyor resimler
sudenasfm (Sunday, 02 November 2014 02:36)
acaba bu kodu filim afişlerinde kullanacam yatay değilde dikey olarak yapılabilirmi sinema filim afişlerine göre
Site Efektleri (Monday, 08 September 2014 17:48)
Merhaba Barış,
Dediğin biçimde bir efekt için kodu tamamen baştan düzenlemek ve yapısını değiştirmek gerekecektir. Ufak düzenlemeler ile yapmak maalesef mümkün olmayacaktır.
Selamlar
Barış (Sunday, 07 September 2014 10:58)
Merhaba. bu kutucukları tam tersi ayarlayabilme şansımız var mı yani yazılar görünecek fareyle üstüne geldiğimizde yazı kaybolacak şekilde.