css 悬停动画_CSS3缩放图像动画效果悬停

css 悬停动画

Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images being the soul of a website, you might have definitely tried your hands on adding some cool hover effects to them.

今天，我们将鼠标悬停在CSS3 Zoom Image动画效果上。由于图像是网站的灵魂，因此您肯定会尝试向其添加一些很酷的悬停效果。

CSS3缩放图像 (CSS3 Zoom Image)

In this tutorial, I have penned down some useful examples of creating a flawless CSS3 zoom image effect using the CSS transform and transition properties.

在本教程中，我写下了一些有用的示例，这些示例使用CSS转换和过渡属性创建完美CSS3缩放图像效果。

是什么使CSS3成为实现图像缩放效果的最佳选择？ (What makes CSS3 the best choice for achieving zoom effects for images?)

Although you may find a large number of jQuery plugins for creating an image zoom effect, CSS3 is perhaps the most recommended one. The reason being its seamless cross-browser compatibility which saves you from the headache associated with addition of lengthy jQuery codes.

尽管您可能会发现大量用于创建图像缩放效果的jQuery插件，但CSS3可能是最推荐的插件。原因是其无缝的跨浏览器兼容性，这使您免于添加冗长的jQuery代码带来的麻烦。

The three examples that I’ll be looking at in this CSS zoom image tutorial include:

我将在此CSS缩放图像教程中看到的三个示例包括：

As per first example, I’ll be achieving the zoom effect using transform: scale(2) and transition: all .3s ease-out作为第一个示例，我将使用transform: scale(2)和transition: all .3s ease-out实现缩放效果
As per second example, I’ll be achieving the zoom effect using two images where the second image would be shown on hover on just the right side of the parent image.作为第二个示例，我将使用两个图像实现缩放效果，其中第二个图像将悬停显示在父图像的右侧。
As per the third example, I’ll be achieving the zoom effect using two images where the second image would be shown on mouse hover at a pre-defined location which is related to the current position of the parent image using CSS transform: translate(0, 300px);按照第三个示例，我将使用两个图像来实现缩放效果，其中第二个图像将在鼠标悬停时显示在与CSS父图像的当前位置相关的预定义位置transform: translate(0, 300px);

Let’s start with the first example of css image zoom on hover animation

让我们从悬停动画上CSS图像缩放的第一个示例开始

In this example, I’ve used 2 images to showcase the zoom effect. Here is a detailed explanation of the transition and transform properties of CSS which will be used here:

在此示例中，我使用了2张图像来展示缩放效果。这是将在此处使用CSS过渡和转换属性的详细说明：

transition: all .3s ease-out – This transition property will include the following values:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

过渡：所有.3s过渡期–此过渡属性将包括以下值：

过渡：[过渡属性] [过渡持续时间] [过渡计时功能] [过渡延迟]；

As per above, transition-property will have all(comma-separated) or none of the CSS properties, transition-duration will include values which will determine the amount of time that will be consumed in completion of the transition. This will be displayed in seconds and milliseconds.

如上所述，过渡属性将具有全部（逗号分隔）或不具有CSS属性，过渡持续时间将包含将确定完成过渡所花费的时间量的值。这将以秒和毫秒为单位显示。

In addition to this, the transition-timing-function will be used for specifying the change in speed at which the transition gets modified over the duration(here, I’m referring to the value set for transition-duration). The transition-timing-function property can include the below values:

除此之外，过渡计时功能将用于指定在整个持续时间内修改过渡的速度变化（此处，我指的是为过渡持续时间设置的值）。 transition-timing-function属性可以包含以下值：

Linear: It represents that a uniform speed will be maintained for the image transition线性：表示为图像过渡将保持一致的速度
Ease-in: It represents that the animation will be started slowly and finished at a high speed缓入：代表动画将缓慢开始并以高速完成
Ease-out: It represents that the animation will be started at full speed and finished at a slow speed缓动：代表动画将以全速开始并以慢速结束
Ease-in-out: It represents that the animation will be started slowly, run at the fastest speed at the middle point and finished off slowly缓入缓出：表示动画将缓慢开始，在中间点以最快的速度运行，然后缓慢结束
Ease is like ease-in-out– It represents that the animation will operate in the same manner as in the case of ease-in-out with only one exception that during the start, it will be slightly faster as compared to its speed in the end.缓动就像快进一样–它表示动画的操作方式与快进一样，只是一个例外，即在开始过程中，与快进相比，动画会稍微快一些。结束。

Finally, there will be transition-delay which will represent the time delay from when the transition has been triggered.

最后，将存在过渡延迟，该延迟表示从触发过渡开始的时间延迟。

Transform: scale(2): This is a CSS Transform property that will be used for increasing or decreasing the size of a specific image element, Here, scale(2) means that you’ll be able to scale an image element just double than its original size. Here, I’ll be using two values viz: x and y which will be used for stretching the image element horizontally and vertically respectively.Transform：scale（2）：这是一个CSS Transform属性，将用于增加或减小特定图像元素的大小，在这里，scale（2）表示您可以将图像元素缩放到两倍它的原始大小。在这里，我将使用两个值viz：x和y，分别用于水平和垂直拉伸图像元素。

The code associated with this example is shown below:

与该示例关联的代码如下所示：

css3-hover-zoom1.html

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{ padding:25%;float: left;
}
.parentimage { width: 300px;height: 300px; -webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;
}
.parentimage:hover {-moz-transform: scale(2);-webkit-transform: scale(2);-o-transform: scale(2);-ms-transform: scale(2);transform: scale(2);
}
</style>
</head>
<body>
<div><img class="parentimage" src="Images/image1.jpg" /><img class="parentimage" src="Images/image2.jpg" /><img class="parentimage" src="Images/image3.jpg" /><img class="parentimage" src="Images/image4.jpg" />
</div>
</body>
</html>

Now, let’s get to know what happens in the second example

现在，让我们了解第二个示例中发生的情况

Here, I’ll be using each of the four images twice. The transition properties used here will include the ones mentioned below:

在这里，我将两次使用四个图像。此处使用的过渡属性将包括以下提到的属性：

position:absolute – This property will be applied to the second version of a parent image so that when the same(here, I’m referring to the image’s second version) is displayed in the web browser, it won’t affect other page elements.position：absolute –此属性将应用于父图像的第二版本，以便在Web浏览器中显示相同版本（此处是指图像的第二版本）时，它不会影响其他页面元素。
Width: 0px – this property will be used for hiding the second version of the main/parent image宽度：0像素-此属性将用于隐藏主/父图像的第二个版本
transition: width 0.3s linear 0s – this property will be used for maintaining consistent speed throughout the transition. For a better understanding of this property, I recommend reviewing the first example.过渡：宽度0.3s线性0s –此属性将用于在整个过渡期间保持一致的速度。为了更好地了解此属性，建议阅读第一个示例。

The code associated with this example is shown below:

与该示例关联的代码如下所示：

css3-hover-zoom2.html

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">  div{  padding:20%;  float: left;  }  .parentimage{  width: 300px;  height: 300px;  }  .parentimageLarge{  position:absolute;  width: 0px;  transition: width 0.3s linear 0s;  z-index: 12;  }  .parentimage:hover + .parentimageLarge{  width:600px;  height:600px;                 }         </style>
</head>  <body>
<div>  <img class="parentimage" src="Images/image1.jpg" />            <img class="parentimageLarge" src="Images/image1.jpg" />  <img class="parentimage" src="Images/image2.jpg" />  <img class="parentimageLarge" src="Images/image2.jpg" />  <img class="parentimage" src="Images/image3.jpg" />  <img class="parentimageLarge" src="Images/image3.jpg" />  <img class="parentimage" src="Images/image4.jpg" />  <img class="parentimageLarge" src="Images/image4.jpg" />  </div>
</body>
</html>

Finally, let’s get to know about the third example of css zoom image animation

最后，让我们了解CSS缩放图像动画的第三个示例

This example is absolutely similar to example no.2 with only a single difference that the resultant image is located at a different position. The transform property used here is:

该示例与示例2绝对相似，仅一个不同之处在于所得图像位于不同位置。这里使用的transform属性是：

transform: translate(0,300px) : this property is used for shifting the image element from its current location to a new one.

transform：translate（0,300px） ：此属性用于将图像元素从其当前位置移动到新位置。

CSS3 Code associated with this example is shown below:

与该示例关联CSS3代码如下所示：

.parentimage:hover + .parentimageLarge{
width:600px;
height:600px;
transform: translate(0,300px);
}

CSS3缩放图像动画效果演示 (CSS3 Zoom Image Animation Effect Demo)

You can visit below URLs for the demo of all three examples.

您可以访问以下URL，获取所有三个示例的演示。

CSS Zoom Image Animation Effect Demo Example 1CSS缩放图像动画效果演示示例1
CSS Zoom Image Animation Effect Demo Example 2CSS缩放图像动画效果演示示例2
CSS Zoom Image Animation Effect Demo Example 3CSS缩放图像动画效果演示示例3

CSS缩放图像摘要 (CSS Zoom Image Summary)

Hope you’d have followed the steps covered in this tutorial and would find them useful enough in achieving the desired zoom effect for your website images.

希望您已按照本教程中介绍的步骤进行操作，并发现它们对实现网站图像所需的缩放效果足够有用。

About the Author: Jason Roiz is qualified outsource web development professional who brings to the table a quantum of learning around custom Magento development services. He meets expectations for OSSMedia, a CMS development company giving proficient WordPress, Magento, Drupal and Joomla improvement administrations.

作者简介 ：Jason Roiz是合格的外包Web开发专业人员，他将有关定制Magento开发服务的知识带到了桌面。他满足了CMS开发公司OSSMedia的期望，该公司提供精通WordPress，Magento，Drupal和Joomla改进管理。

翻译自: https://www.journaldev.com/6689/css3-zoom-image-animation-effect-on-hover

css 悬停动画