How to create a cool image enlargement effect using pure CSS3?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to create a cool image enlargement effect using pure CSS3?

青灯夜游

Aug 20, 2021 pm 06:24 PM

css3 magnifier mouseover

In the article "Using CSS3 to create a cool triangular background image", we introduced the method of using CSS3 to create a cool triangular background image to make the web page look high-end! This time we will talk about how to use pure CSS3 to achieve the mouse-over image enlargement effect. Friends who are interested can learn about it~

The mouse-over image enlargement effect is a very useful and eye-catching special effect. Add interactivity to the web page. When the user hovers the mouse over the image, the image will be slightly enlarged. Suitable for image display pages, it can greatly improve the user experience!

Let’s start with the code directly:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
 
.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
 
.img-wrapper img:hover {
  transform: scale(1.1);
}
 
.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}
/* ============== 
* 灰度滤镜
* ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
 
.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
 
/* ============== 
* 深褐色滤镜
* ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}
 
.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}
 
 
</style>
</head>
<body>
<div class="img-wrapper">
  <img  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"  class="lazy"  / alt="How to create a cool image enlargement effect using pure CSS3?" >
</div>
<!-- 灰度滤镜 -->
<div class="img-wrapper">
  <img  class="grayscale-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"   / alt="How to create a cool image enlargement effect using pure CSS3?" >
</div>
 
<!-- 深褐色滤镜 -->
<div class="img-wrapper">
  <img class="sepia-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"  
  />
</div>
 
</body>
</script>
</body>
</html>

Copy after login

The effect is as shown below:

How to create a cool image enlargement effect using pure CSS3?

OK, let’s analyze the above Code:

First create a div to wrap the img tag. The function of the div container is to block the image. When the image is enlarged, it will not let the image exceed the width and height we specify. If you want div to achieve this function, you need a key style overflow: hidden; so that when the image is enlarged, the excess part will be hidden.

<div class="img-wrapper">
  <img  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"  class="lazy"  / alt="How to create a cool image enlargement effect using pure CSS3?" >
</div>
 
.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

Copy after login

Then there is the image magnification effect. What I use here is the transform: scale(1,1) style. The transform attribute can apply a 2D or 3D transformation to an element, while the scale is used to enlarge (an integer will enlarge) or shrink (a negative number will reduce) the element.

.img-wrapper img {
  height: 220px;
}
.img-wrapper img:hover {
  transform: scale(1.1);
}

Copy after login

How to create a cool image enlargement effect using pure CSS3?

The image magnification effect achieved in this way is abrupt, and it suddenly enlarges when the mouse hovers. You can use the transition attribute to add a transition effect, because this attribute is a CSS3 New attribute, need to add prefix to be compatible with other browsers

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;  /* 兼容谷歌浏览器 */
  transition: 0.3s linear;
}

Copy after login

How to create a cool image enlargement effect using pure CSS3?

This will achieve the mouse-over image magnification effect. But this kind of magnification effect is a bit monotonous. We can set the filter attribute filter to the picture to make the picture magnification effect more cool!

We can first make the picture gray (filter: grayscale(100%)) or dark brown (filter: sepia(100%)), and then click When hovering, the color will change while the image is zoomed in (just remove the filter effect), which will make the special effects even cooler.

<!-- 灰度滤镜 -->
<div >
  <img class="grayscale-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"  
  />
</div>
 
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
 
.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
 
 
 
<!-- 深褐色滤镜 -->
<div class="img-wrapper">
  <img class="sepia-img lazy"  src="/static/imghw/default1.png"  data-src="demo/img/1.jpg"
     
     
  />
</div>
 
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}
 
.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

Copy after login

How to create a cool image enlargement effect using pure CSS3?

滤镜属性filter定义了元素(通常是<img  alt="How to create a cool image enlargement effect using pure CSS3?" >)的可视效果(例如：模糊与饱和度)。
 
可以设置的滤镜效果：
blur(px)：给图像设置高斯模糊。    
brightness(%)：给图片应用一种线性乘法，使其看起来更亮或更暗。    
contrast(%) ：调整图像的对比度。    
drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。
grayscale(%)：将图像转换为灰度图像
hue-rotate(deg) ：给图像应用色相旋转。
invert(%) ：反转输入图像。
opacity(%)：转化图像的透明程度。
saturate(%)： 转换图像饱和度。
sepia(%) ： 将图像转换为深褐色。

Copy after login

The PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css Video Tutorial"!

The above is the detailed content of How to create a cool image enlargement effect using pure CSS3?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7638

CakePHP Tutorial

1391

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

150

Related knowledge

How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

How to set mouse hover time in Win11? Win11 mouse hover time setting tutorial Feb 01, 2024 pm 02:54 PM

How to set mouse hover time in Win11? We can set the mouse hover time when using win11 system, but many users don't know how to set it? Users can directly click to create a new text document and enter the following code to use it directly. Let this site carefully introduce to users how to set the mouse hover time in Win11. How to set the mouse hover time in Win11 1. Click [right-click] on a blank space on the desktop, and select [New - Text Document] from the menu item that opens. 3. Then click [File] in the upper left corner, and in the open drop-down item, select [Save As], or press the [Ctrl+Shift+S] shortcut key on the keyboard. 6

How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

Tips and methods to use CSS to achieve jitter effects when the mouse is hovering Oct 21, 2023 am 08:37 AM

Tips and methods to use CSS to achieve jitter effects when the mouse is hovering. The jitter effects when the mouse is hovering can add some dynamics and interest to the web page and attract the user's attention. In this article, we will introduce some techniques and methods of using CSS to achieve mouse hover jitter effects, and provide specific code examples. The principle of jitter In CSS, we can use keyframe animation (keyframes) and transform properties to achieve the jitter effect. Keyframe animation allows us to define an animation sequence by

How to enlarge the image by clicking the mouse in css3 Apr 25, 2022 pm 04:52 PM

Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale(x-axis magnification, y Axis magnification);}".

How to implement image magnifying glass effect with JavaScript? Oct 18, 2023 am 08:45 AM

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