Hi
I find the best way is to do it in my css file
Try this in your css file
Code:
.thumb{border-radius:10px;border:2px solid #748178;float:left;width:360px;height:225px;padding:2px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25);margin: 10px 10px 10px 10px;}
.thumb:hover{border-radius:10px;border:2px solid #FF0000;float:left;width:360px;height:225px;padding:2px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25);margin: 10px 10px 10px 10px;}
HTML:
Code:
<div><img class="thumb" src="img/1.jpg" alt="" ></div>
<div><img class="thumb" src="img/2.jpg" alt="" ></div>
<div><img class="thumb" src="img/3.jpg" alt="" ></div>
<div><img class="thumb" src="img/4.jpg" alt="" ></div>
<div><img class="thumb" src="img/5.jpg" alt="" ></div>
<div><img class="thumb" src="img/6.jpg" alt="" ></div>
If you look on a website i did http://www.silvertreeestates.co.za/#stelisting abd scroll down a little you will see the featured has a smaller imag then further down on the actual listing etc.
and the above is how I do that...
rgds,Simon
p.s I'm sure there are other ways to do it.... this is my way, use it or loose it up to you guys....
Bookmarks