I’m going to take a shot in the dark on this one but I’m guessing it will be a JS value that you may have to change. What makes me think that is the use of isotope.
Grabs piece of pineapple to eat
It could be possible to change the CSS you would just have to target the right one. From the quick glance I took you can try .project.small classes combined but it may mess with the images a little.
Here is part of the code for one of the images
<a rel="bookmark" href="http://adinnovations.com.au/project/test-projects-kim/">
<div class="description" style="opacity: 0; display: block;"></div>
<div class="overlay" style="opacity: 0; display: block;"></div>
<img class="thumb wp-post-image" width="300" height="225" title="" alt="Retrac Louvres™ ROOFS" src="http://adinnovations.com.au/wp-content/uploads/retract-louvres-300x225.jpg"></img>
</a>
All other images seem to be following the same format. Here are the changes I would do in styles.css
#content .project.small img{
width: 100%;
height: auto;
margin: 5px;
}
and
#content .project.small .overlay {
position: absolute;
display: none;
background: #cdb980;
width: 100%;
height: 100%;
z-index: 9;
margin: 5px;
}
Thread Starter
norrie
(@norrie)
Thank you!! I’ll give that a go.
Thread Starter
norrie
(@norrie)
Didn’t work unfortunately.
That’s strange, I made the code changes via FF inspector and here is the output
http://www.tiikoni.com/tis/view/?id=4036ee1
style sheet
http://www.tiikoni.com/tis/view/?id=9a53aad
Thread Starter
norrie
(@norrie)
Yeah, right. I’ll look at it again. Thanks again!
Thread Starter
norrie
(@norrie)
Really appreciate the tips I’ve been given so far. This is kinda working but how can I make the width or the bottom borders the same as the sides? Also the last thumbnail isn’t the same as the others now that the border has been added. I’ve been fiddling but can’t figure it out. Here’s the code. Thanks again.
#projects {
margin: 0 0 0 0;
width: 100%;
padding: 0;
float: left;
display: block;
position: relative;
}
#projects .thumbs {
margin: 0 auto;
}
#content #projects li{
padding: 0;
background: none;
}
#content .project.small {
display: block;
position: relative;
float: left;
margin: 0 !important;
max-width: 300px;
height: auto;
padding-bottom: 0;
cursor: pointer;
background: #fff;
zoom: 1;
visibility: hidden;
}
#content .project.small img{
width: 100%;
height: auto;
border: 6px solid #e2e2e2;
}
#content .project.small .description {
position: absolute;
display: none;
top: 0;
color: #fff;
padding: 20px 20px !important;
z-index: 10;
}
#content .project.small .overlay {
position: absolute;
display: none;
background: #cdb980;
width: 100%;
height: 100%;
z-index: 9;
border: 6px solid #e2e2e2;
}
#content .project.small .title {
display: inline-block;
margin: 0 12px 0 0;
padding-bottom: 12px;
font-weight: bold;
font-size: 1em;
color: #fff;
}
Thread Starter
norrie
(@norrie)
Also the rollovers are too big now.
