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

css3magnifiermouseover

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/imghwm/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/imghwm/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/imghwm/default1.png"  data-src="demo/img/1.jpg"   
  />
</div>

</body>
</script>
</body>
</html>

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/imghwm/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);
}

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);
}

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;
}

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/imghwm/default1.png" data-src="demo/img/1.jpg" alt="How to create a cool image enlargement effect using pure CSS3?" >
</div>

.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



<!-- 深褐色滤镜 -->
<div>
  <img  class="sepia-img lazy" src="/static/imghwm/default1.png" data-src="demo/img/1.jpg" alt="How to create a cool image enlargement effect using pure CSS3?" >
</div>

.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

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(%) ： 将图像转换为深褐色。

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

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

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles