Question

I have an image inside a content area on my site, I want the image only to float up a bit when hovering anywhere inside that content area… not sure how to do that- as of right now it only moves up when mousing over the image itself- can’t add the css to the entire content box as I don’t want the other content to move, just the image.

(see here: http://tm26.be/healthcare/index.html – the little orange and white globes on each content panel)

the css I’m using to move the globes is this:

.img {position:absolute;bottom:-30px;right:0px; transition:.65s;}
.img:hover {bottom:10px}

Answer 1

Place the hover condition on the container like this:

.box1 .img {position:absolute;bottom:-30px;right:0px; transition:.65s;}
.box1:hover .img {bottom:10px;}