Zeigen Sie ein SVG um ein Bild bei Hover

Question

Also ich möchte Form um img hinzufügen, wenn es schwebt.

Meine img haben Rand-Radius 50% aber Form, die gezeigt wird - wird Sechseck (SVG).

Kann ich es tun, nur in CSS? Oder muss ich JS verwenden?

Answer 1

Sie können SVG-Hexagon-Bild als Hintergrund eines div haben und Sie können es zunächst ausblenden, und Sie können Ihr Bild in diesem div zeigen, und beim Hover-Ereignis Ihres Bildes können Sie das im Eltern-div angegebene Hexagon-Bild zeigen .

Sie können wie unten CSS etwas haben:

.parent-div .svg-img{ 
 
display:hidden; 
 
} 
 

 
.child-img:hover .child-img:parent img{ 
 
display:block 
 
}

Answer 2

In CSS Sie einen Hintergrund verwenden können, wo steht das svg:

span { 
 
    display: inline-block; 
 
    padding: 50px; 
 
    float:left; 
 
    pointer-events:none;/* to trigger events only on img:hover */ 
 
} 
 
img { 
 
    display: block; 
 
    border-radius: 100%; 
 
    pointer-events:auto;/* catch mouse events so are parents seeing it too */ 
 
} 
 
span:hover, 
 
span +img:hover { 
 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iY29sb3ItZmlsbCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICANCiAgPHBvbHlnb24gY2xhc3M9ImhleCIgcG9pbnRzPSIzMDAsMTUwIDIyNSwyODAgNzUsMjgwIDAsMTUwIDc1LDIwIDIyNSwyMCI+PC9wb2x5Z29uPg0KICANCjwvc3ZnPg==); 
 
} 
 
span + img { 
 
    padding: 50px;/* those extra 50px catch hover too */ 
 
    
 
}

<span><img src="http://dummyimage.com/200x200&text=span-img"/></span> 
 

 
<img src="http://dummyimage.com/200x200&text=img-alone" />