search

Home >Web Front-end >CSS Tutorial >How to create a cool image enlargement effect using pure CSS3?

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

青灯夜游
青灯夜游Original
2021-08-20 18:24:301935browse

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="demo/img/1.jpg"/ alt="How to create a cool image enlargement effect using pure CSS3?" >
</div>
<!-- 灰度滤镜 -->
<div class="img-wrapper">
  <img  class="grayscale-img" 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" 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="demo/img/1.jpg"/ 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 class="img-wrapper">
  <img class="grayscale-img" 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"
    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);
}

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
Previous article：Create a cool triangle background image using CSS3Next article：Create a cool triangle background image using CSS3

Related articles

See more