» » » » Temada hareket eden resimler style.css

Temada hareket eden resimler style.css

ss253
ss253 2-12-2014, 14:19
Merhaba arkadaslar yardimci olursaniz sevinirim ilk onceden tesekkur ederim
Sorun deyildi istek diyelim sitenin birinde ana sayfada mause- ile reimlerin uzerine dokundugunda resimler haraket ediyor kaldirdiginda ise eski yerine geri gidiyor bu bir style.css zann ediyorum

bu Mause ile uzerine gelmeyen hali
Temada hareket eden resimler style.css

bu se masue ile resmin uzerine geldikde oluyor

Temada hareket eden resimler style.css

kirmizi isaretlere gostermek istediyim resmin hareket istikametidir
boyle bir modülmü böyle bir style ne biliyi varsa bana önerirmisiniz?
Çözüldü İşleme Alındı Çözülemedi
Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.
0
ss253 2 Aralık 2014 22:34
@dlestarter,
thank you very much feel
0
dlestarter 2 Aralık 2014 21:42
ah, I think I misundrstood you because that's just simple css 3 transition, I thought you were talking about real image zoom...

Try this, in shortstory.tpl and fullstory.tpl, wrap them with class like this
<div class="resize-img">
{short-story}
</div>

<div class="resize-img">
{full-story}
</div>

Add css below to one of your css file.
.resize-img img{width:500px;height:auto;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}
.resize-img img:hover{width:600px;height:auto}

you can change image width of your choice:
default image to display: width:500px
when move mouse howver the image will be resized with css transition: width:600px
You can change the size you want, you can also fix the size in "height" if you want, but if image is not exact size then it can look upgly, so I recommend you use height:auto so this way it will look perfect, when mouse over the height will be enlarge based on wdith you set...

Please note the transition will take effect to all of images you added within shortstory and full story, if you add images using xfield then wrap the class around xfield name then it will work on xfield like
[xfgiven_NAME]
<div class="resize-img">
<img src="[xfvalue_NAME]" alt="" />
</div>
[/xfgiven_NAME]

There is nothing fancy about it, just plain and simple...
0
ss253 2 Aralık 2014 20:58
@dlestarter,
www.populyar.az Look
0
dlestarter 2 Aralık 2014 19:36
not sure if I understand your question correctly...you want to automatically resize image to larger size on "mouse over"?

if that the case you can use some jquery plugin (I am sure MarZoChi knows one), because simple css will not work the way you want, I can recommend a few plugins you cna use
http://www.jacklmoore.com/zoom/
http://www.javascript-fx.com/navigation/imagezoom/general_help/help.htm
l http://www.ajax-zoom.com/examples/example20.php http://css-tricks.com/anythingzoomer-jquery-plugin/