Home

JS special effects

CSS3 special effects

CSS3 magnifying glass to view image code

Download Now Preview

<body><script src="/demos/googlegg.js"></script>
<div class='container'>
<header>
<h1>SVG clip-path Hover Effect</h1>
</header>
<main>
<div class='items'>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> X-rays </text>
<g clip-path='url(#clip-0)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/1.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> X-rays </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-1'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Worms </text>
<g clip-path='url(#clip-1)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/2.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Worms </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-2'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Aurora </text>
<g clip-path='url(#clip-2)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/3.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Aurora </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-3'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Angus </text>
<g clip-path='url(#clip-3)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/4.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Angus </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-4'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Huitzi </text>
<g clip-path='url(#clip-4)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/5.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Huitzi </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<clipPath id='clip-5'>
                <circle cx='0' cy='0' fill='#000' r='150px'></circle>
                                                                                                                                                                                                                                                                                   <g clip-path='url(#clip-5)'>
               <image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/6.png'></image>
               <text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Dalí </text>
</g>
</svg>
</div>
</div>
</main>
</div>

CSS3 SVG magnifying glass image viewing code is a grid layout, mouse-over image SVG clipping path animation special effects, see the demonstration to experience the specific effect.

Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

How to achieve image scrolling effect with CSS3 (with code)

08 Jul 2020

In normal times, we use some scrolling image effects, which are all implemented with javascript code (JQuery). However, in today's era when Html5 and CSS3 are prevalent, javascript code can be replaced to achieve some common effects. Let's take a look at how CSS3 is implemented. Picture scrolling effect.

How to enlarge the image by placing the mouse in css3? (with code)

10 Oct 2018

In the study of CSS3, we often make some small animation effects, which is very interesting, so today's article will introduce to you an effect of image enlargement in CSS3. Interested friends can take a look.

Example code of jquery image magnifying glass function_jquery

16 May 2016

Example code of jquery image magnifying glass function, friends who need it can refer to it

JavaScript image magnification technology (magnifying glass) to achieve code sharing_javascript skills

16 May 2016

This article introduces the JavaScript image magnification technology (magnifying glass) implementation code. Friends in need can refer to it.

Where is the magnifying glass function of MeituXiuXiu_How to view the magnifying glass function of MeituXiuXiu

08 Apr 2024

1. First open the MeituXiuXiu APP, select the photo you want to beautify, and click Cutout. 2. Then click New in the cutout interface. 3. Click to create a new area. 4. Then click on the shape; 5. Finally, select the shape of the magnifying glass and click on the graphic to adjust the range and size of the magnifying glass.

HTML5 practice - sample code for using css3 to enrich image styles

22 Mar 2017

In CSS3, if box-shadow and border-radius are used directly on images, the browser cannot render them well. But if you use the image as a background-image, the added style browser can render it well. I will introduce how to use box-shadow, border-radius and transition to create different image style effects.

h5 code to achieve magnifying glass effect

24 Jul 2018

The content shared with you in this article is about the h5 code to achieve the magnifying glass effect. The content is of great reference value. I hope it can help friends in need.

Using JavaScript to implement the image magnifying glass function

09 Aug 2023

Using JavaScript to implement the image magnifying glass function In web design, the image magnifying glass function is a common and practical function. It allows users to enlarge local details when the mouse hovers over the image, improving the user experience. In this article, we will use JavaScript to implement a simple image magnifier function. First, we need to prepare an image to use. Suppose we have an image called "image.jpg" and we will use it to implement the magnifying glass function. At the same time, we also need a

How to implement image magnifying glass effect with JavaScript?

18 Oct 2023

How to achieve image magnifying glass effect with JavaScript? In web design, the image magnifying glass effect is often used to display detailed product images. When the mouse is hovering over the image, a magnifying lens can be displayed at the mouse position to enlarge part of the image, thereby providing a clearer display of details. This article will introduce how to use JavaScript to achieve the image magnifying glass effect and provide code examples. 1. HTML structure First, you need to create a page layout with a magnifying glass. In HTML text

See all articles