将鼠标悬停在矢量的一部分上时，如何放大图像？

Question

I have 1 the in the top left of page mostly offscreen, which functions as a home button. I would like to slightly increase it's size when hovered over ,however nothing I try seems to work.

Seeing as the image is a vector which (thank god) is a perfect circle. So with the area tag I could easily make it a home button. Now I would like to enlarge the image when hovering over that area tag, I've tried working with the '+' selector.

How would I do something like this?

This is a code snippet for some context:

 .emblem { width: 200px; height: 200px; position: absolute; margin: -100px 0px 0px -80px; z-index: 2; opacity: 0.9; } .emblem:hover { width: 220px; height: 220px; } .emblem2 { visibility: hidden; width: 220px; height: 220px; } area:hover + .emblem2 { visibility: visible; } 

 <map name="homemap"> <area shape="circle" coords="100,100,100" alt="Home button" href="index.html" /> </map> <img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" /> <img class="emblem2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" /> 

Now this works fine... But only when I hover over the transparent part of the image, and what I want to achieve is the exact opposite.

Answer 1

You could try just transforming the scale of the image you want to enlarge. something like this:

 .emblem { width: 200px; height: 200px; opacity: 0.9; position: relative; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(1); } .emblem:hover{ -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1.5); -ms-transition: all 200ms ease-in; -ms-transform: scale(1.5); -moz-transition: all 200ms ease-in; -moz-transform: scale(1.5); transition: all 200ms ease-in; transform: scale(1.5); } 

 <img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" /> 

Answer 2

Using CSS:

 .img-box { cursor: pointer; height: 110px; position: relative; width: 110px; } .img-link { color: #000; text-decoration: none; } .img-link a, .img-link a:active, .img-link a:focus, .img-link a:hover { border-color: transparent; color: #000; text-decoration: none; } .fa-hover { bottom: 0; font-size: x-large; position: absolute; right: 0; } .fa-hover:hover + .emblem { height: 100px; width: 100px; } .emblem { height: 75px; width: 75px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="img-box"> <a class="img-link" href="https://www.google.ca" target="_window"> <div class="fa-hover"> <span class="fa fa-plus"></span> </div> <img class="emblem" src="https://lh3.ggpht.com/A0x3jzuH1qRkE10HcTiT4qQr_6iAqVg-CTsoIqxnoIFyv92V91WI3KqiVlOvLtfoMRg=w300" /> </a> </div> 

Downside to the '+' selector is the element your hovering on has to be above the 'img' tag, but with css that icon can be moved.