html - Change opacity and add thumbnail on hover using css -


i change opacity of img , add 50x50 thumbnail zoom on hover using css no jquery. have done far.

html code:

<div class="span4">      <a class="zoom-icon" href="#">         <img class="blackout image-1" alt="elite sports" src="http://www.domain.com/images/es.jpg" width="300" height="300">     </a> </div>

css code:

.span4 { margin: 35px 50px; border: 5px solid #000; } .span4:hover { border: 5px solid #ccc; } .span4 a:hover { background: #000; } .blackout:hover { opacity: .0; }

i have black background on hover working can't figure out how make thumbnail show on top of black background "blackout". helpful tips appreciated.

update w/fiddle:

http://jsfiddle.net/8bmyh/

something

http://jsfiddle.net/8bmyh/14/

html

    <div class="span4"> <a class="portfolio-link-icon" href="http://www.elitesports.com"><         <img class="alignnone blackout size-full wp-image-2592" alt="elite sports" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/es.jpg" width="300" height="300" />         <img class="zoom-link" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/portfolio-link-icon.png" />     </a>  </div>

css 

span4 {     background: #000;     margin: 35px 50px;     width: 300px !important;     height: 300px;     border: 5px solid black;     float: left;     -webkit-transition: 1s ease;     -moz-transition: 1s ease;     -o-transition: 1s ease;     -ms-transition: 1s ease;     transition: 1s ease;     box-shadow: 1px 1px 5px #000; } .span4:hover {     overflow: hidden;     border: 5px solid #8b8c8d;     border-radius: 25%;     -webkit-transform: rotate(290deg);     -moz-transform: rotate(290deg);     -o-transform: rotate(290deg);     -ms-transform: rotate(290deg);     transform: rotate(290deg); } .blackout:hover {     opacity: .0; } .zoom-link {     top: 130px;     left: 130px;     position: absolute;     visibility: hidden; } .span4:hover .zoom-link {     position: absolute;     visibility: visible; } .span4:hover .blackout {     opacity: 0; }

Comments

Post a Comment

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

i force app's home screen portrait , other views landscape. apple rejects app if this? if not , how force first screen launch in portrait mode? , force other screens launch in landscape. this not duplicate question search every possible answer in website. i force app's home screen portrait , other views landscape. apple rejects app if this? no apple not reject app this. have lot of apps doesn't support orientation. forcing on 1 screen won't cause app reject. if not , how force first screen launch in portrait mode? , force other screens launch in landscape. can on write : -(nsuinteger)supportedinterfaceorientations; function.
Read more

java Extracting Zip file -

i'm looking way extract zip file. far have tried java.util.zip , org.apache.commons.compress, both gave corrupted output. basically, input zip file contain 1 single .doc file. java.util.zip: output corrupted. org.apache.commons.compress: output blank file, 2 mb size. so far commercial software winrar work perfectly. there java library make use of this? this method using java.util library: public void extractzipnative(file filezip) { zipinputstream zis; stringbuilder sb; try { zis = new zipinputstream(new fileinputstream(filezip)); zipentry ze = zis.getnextentry(); byte[] buffer = new byte[(int) ze.getsize()]; fileoutputstream fos = new fileoutputstream(this.tempfolderpath+ze.getname()); int len; while ((len=zis.read(buffer))>0) { fos.write(buffer); } fos.flush(); fos.close(); } catch (filenotfoundexception e) { // todo auto-generated catch block ...
Read more

C# WinForm - loading screen -

i ask how make loading screen (just picture or something) appears while program being loaded, , disappears when program has finished loading. in fancier versions, have seen process bar (%) displayed. how can have that, , how calculate % show on it? i know there form_load() event, not see form_loaded() event, or % property / attribute anywhere. all need create 1 form splash screen , show before main start showing landing page , close splash once landing page loaded. class splashform { //delegate cross thread call close private delegate void closedelegate(); //the type of form displayed splash screen. private static splashform splashform; static public void showsplashscreen() { // make sure launched once. if (splashform != null) return; thread thread = new thread(new threadstart(splashform.showform)); thread.isbackground = true; thread.setapartmentstate(apartmentstate.sta); thread....
Read more