Project Thumbnail Mouseover

[ana]

Hi Arwin!
Fisrt congrats for your amazing theme.. I am so in love whit it!

I am quiet new and I´ve been a few hour trying to get a mouseover transparent background on projects thumbnails!!. I will need some like this example http://www.photosalonhelga.com/

Any idea to get it? I have been trying with the code you suggeted a few weeks ago

.col[data-type="project"]:hover .ph{
border: 10px solid #00f;
}
.col[data-type="project"] .ph{
border: 10px solid transparent;
}

But this is to add a border to thumbnails and what I basicly need is to keep the project image around as a border.
THANK YOU SO MUCH!!

[arminunruh]

Hey ana!

That's their CSS, hope that helps!

.col[data-type="project"] .ph span {
    background-color: white;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    width: 90%;
    height: 90%;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
  .col[data-type="project"] .ph span:hover {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
  }

[ana]

@arminunruh Helps A LOT! This is working perfectly now!
Thank you so much! Great work!