html - Can anyone tell me how to make my these images have a hover? -

-

i building site in html & css , have section have images change when hovered over. problem can first 1 want, when try same method on images side side, gets moved or doesn't work. can see example of first hexagon changes in "core values" section of site. can either pull githib repo here or have added fiddle . thank you! 

.hex-image  {  	padding-top: 70px;  }      .hexy-hex {  	position: relative;  	margin-top: 60px;  	height: 900px;	  }  	  .hexy-hex-2 {  	position: relative;  	top: -45px;	  }    .hexy-hex-3 {  	position: relative;  	top: -45px;	  }    .hexy-hex-4 {  	position: relative;  	top: -45px;	  }    .hexy-hex-5 {  	position: relative;  	top: -45px;	  }	    .lt-blue-hex {  	margin: 0px;				  }      .drk-grey-hex {  	margin: 0px;		  }    .lt-grey-hex {  	margin: 0px;			  }    #spirituality {  	background-image: url('http://i.imgur.com/dptzosk.png');  	height: 200px;  	width: 175px;  }    #spirituality:hover {  	background-image: url('http://i.imgur.com/ha9ygeg.png');  }
    <section class="hex-image"> 	      				      				<h1 style="color: #686868" align="center">core values</h1>      				      				      					<div class="hexy-hex" align="center">	      															      						<div id="spirituality"></div>			      						<!-- <a class="lt-blue-hex cv" href="http://"><img src="images/blue-hex-up-sm.png" title="jdi" /></a>	-->      						      															      					      					<div class="hexy-hex-2" align="center">      															      						<div id="honesty"></div>      						      						<div id="innovation"></div>      							      							      						      						      							<a class="drk-grey-hex" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="jdi" /></a>      							      							<a class="lt-grey-hex" href="http://"><img src="http://i.imgur.com/vcnrceh.png" title="jdi" /></a>       															      					      					<div class="hexy-hex-3" align="center">      										      							<a class="lt-grey-hex" href="http://"><img src="http://i.imgur.com/vcnrceh.png" title="jdi" /></a>      							      							<a class="lt-blue-hex" href="http://"><img src="http://i.imgur.com/dptzosk.png" title="jdi" /></a>	      												      							<a class="drk-grey-hex" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="jdi" /></a>            							      				      					<div class="hexy-hex-4" align="center"	>      										      							<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/dptzosk.png" title="jdi" /></a>      							      							<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="jdi" /></a>																      							<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vcnrceh.png" title="jdi" /></a>      							      							<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/dptzosk.png" title="jdi" /></a>      					      					      					<div class="hexy-hex-5" align="center"	>      						      							<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="jdi" /></a>      													      							<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vcnrceh.png" title="jdi" /></a>      														      							<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/dptzosk.png" title="jdi" /></a>      											      							<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="jdi" /></a>      						      							<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vcnrceh.png" title="jdi" /></a>            					</div>      				</div>      			</div>	      		</div>      	</div>	      			      	<div class="clear"></div>	      				  </section>

so onto problem: seems try achieve mouseover effect on first hexagon. further seems tried failed because hexagons (<div>s) did displayed on each other. instead builded hexagon pyramid <a>-tags there no mouseover effect because <a>-tags have hard coded <img>s cannot changed css.

like in cases have several possibilities. 1 change <img>s on mouseover via javascript/jquery. (out of more) try approach via css , tried (at least comments in code looks way), lets go that.

so <div>s in second row displayed on each other because default <div> block element. if want them stack <a>-tags built pyramid need them behave inline elements (because thats <a>-tags are). can done (for example) adding following css rule <div>s in question:

display: inline-block;

now can use them <a>s , set initial background image via css , change via css , :hover selectors. i've updated fiddle , have done second line (obviously not images intended should understandable): https://jsfiddle.net/7k50bhva/5/ can follow example other lines.

note if want have real links place transparent <a>-tags within <div>s. on transparent (so contentless) <a>-tags have specify width , height.


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more