Web Front-endHTML TutorialCSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnoseCSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose
Dear netizens, hello, everyone, I am Mo Shang Hua Huai, known as Mo Mo. In the previous article "CSS3 Practical Development: Teach you step-by-step practical development of mouse-over picture animation special effects" , I have led you step by step in developing an animation effect when the mouse rolls over.
In this article, I will lead you to develop another animation special effect. I hope you can be inspired. As usual, I do not provide source code for download, but I can guarantee that as long as you copy the code in this tutorial to your local computer step by step, you will get the same operating effect as the original poster.Okay, without further ado, let’s get straight into today’s study. The author is a lazy person, so I still use the material in the previous article.
First, let’s take a look at the special effects we need to implement today:
1. Before the mouse passes over:
2. When the mouse passes over , first smoothly displays the gray cover background, and then smoothly transitions to display the search icon:
After viewing the renderings, go directly to the
CSS3 actual combat of this article Let’s travel!
First, we edit the html code:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles"> <meta name="keywords" content="css,css3,鼠标划过动画效果,css3实战开发,css3案例" /> <title>css3实现鼠标划过图片时效果(1)</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div class="container"> <div class="<strong>photowall</strong>"> <div class="<strong>photoview</strong>"> <a href="http://www.itdriver.cn"><img src="/static/imghwm/default1.png" data-src="img01.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose" ></a> <div class="<strong>mask</strong>"><a href="http://www.itdriver.cn">实战互联网</a></div> </div> <div class="<strong>photoview</strong>"> <a href="http://www.itdriver.cn"><img src="/static/imghwm/default1.png" data-src="img02.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose" ></a> <div class="<strong>mask</strong>"><a href="http://www.itdriver.cn">实战互联网</a></div> </div> </div> </div> </body></html>
Based on the renderings above, we can probably know which divs to edit Apply styles:
1. Apply background paper to the wall;
2. Apply styles to photos to achieve padding padding;
3. Set a mask layer;
Okay, now that you know what styles need to be made, let’s go directly to style coding!
We first set the style for the container so that the container is displayed in the center. The code is as follows:
*{ /* 清空所有元素内外边距*/ margin:0; padding:0;}html,body,.container{ /*设置container高度浏览器自适应*/ height:100%; }.container { /*设置container容器样式*/ width:80%; margin:auto; padding:10px;} Next, we apply the style to the photo wall and paste it wallpaper, and set its height to 500px. The code is as follows:
.photowall{ background:url(bg.png); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ height:500px; /*设置照片墙的高度*/} Let’s first take a look at the running effect of the page at this time:
Now we apply the box model attribute of
CSS3 to center the photo both vertically and horizontally. The code is as follows:
.photowall{ background:url(bg.png); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ height:500px; /*设置照片墙的高度*/ display:-webkit-box; /*应用盒子模型*/ display:-moz-box; display:-o-box; display:box; -webkit-box-pack:center; /*使盒子内元素水平居中*/ -moz-box-pack:center; -o-box-pack:center; box-pack:center; -webkit-box-align:center; /* 设置盒子内元素垂直方向上居中分配空间*/ -moz-box-align:center; -o-box-align:center; box-align:center;} Next, we Add a shadow effect to the photo, and set the inner border of the photo. The code is as follows:
The general appearance of the photo has come out, and then we adjust the size of the cover , and use absolute positioning (the parent container has used relative positioning), adjust the position of the cover mask, and apply the
transition attribute to the cover (if you are not too familiar with the transition attribute) If you understand, please follow my other blog posts), the code is as follows:
.photoview .mask{ position:absolute; /*由于父容器设置了position:relative,所以子元素可以相对父容器做绝对定位*/ top:0; left:0; height: 216px; /*设置遮盖物的宽高*/ line-height:216px; width: 332px; display: inline-block; background:rgba(0, 0, 0, 0.7); /*设置背景半透明*/ opacity:0; /*设置遮盖物为透明的*/ visibility:hidden; /*设置遮盖物是不可见可见的*/ -moz-transition:all 0.4s ease-in-out; /*设置transition属性，一旦遮盖物属性发生变化时，进行平滑动画过度*/ -webkit-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;} At this time, let’s run the page and see the current page display effect:
Now let’s add the search icon, because we want to add animation effects to the image, so I now add the transition attribute to the a tag, the code is as follows:
.photoview .mask a{ background:url(link.png) center no-repeat; /*给遮盖物上的a标签应用样式*/ display:inline-block; height:20px; width:20px; overflow:hidden; text-decoration: none; text-indent:-9999; opacity:0; /*设置a标签默认为透明*/ -moz-transition:all 0.3s ease-in-out; /*一旦a标签属性发生变化时，进行平滑动画过度*/ -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} Regarding the transition attribute, here I will give you a brief introduction. When an element is applied with the transition attribute, if the attributes of this element change due to an event in the future, it will be smoothed. Animated transition effects. This is exactly what we are looking forward to, so I added this attribute to the cover and search icon that need to be animated above.
According to the effect I showed you at the beginning "
2. When the mouse moves over, the gray cover background will be displayed smoothly first, and then the search icon will be displayed with a smooth transition: ", so here we give the photo Add a hover event. When the mouse moves over the photo, we reset the attributes of the cover and the search icon respectively. The code is as follows:
.photoview:hover .mask { /*当鼠标划过照片时，将遮盖物设为不透明，将遮盖物可见的*/ opacity: 1; background:rgba(0, 0, 0, 0.7); visibility:visible;} For the search icon, in order to display For better animation effects, we also set it up for her: delay 0.3s to execute the animation, the code is as follows:
.photoview:hover .mask a{ /*当鼠标划过照片时，将a标签设为不透明，且延迟0.3秒显示*/ opacity: 1; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;} At this point, the code is written, now we come Take a look at the effect:
As expected, the effect we expected was achieved.
Of course, for the search icon delay effect, we can also directly use the compound method, and the effect of
-moz-transition:all 0.3s ease-in-out;修改为
-moz-transition:all 0.3s ease-in-out <strong>0.3s</strong>;最后的0.3s代表动画效果，延时多长时间后执行。is the same as above. I will not lead you here. Demonstrated.
That’s it for this tutorial, thank you all for reading.
Welcome to join the Internet technology exchange group: 62329335
Personal statement: The blog posts shared are absolutely original, and we strive to make every one of them original. Knowledge points are verified through practical demonstrations.
What are self-closing tags? Give an example.Apr 27, 2025 am 12:04 AMSelf-closingtagsinHTMLandXMLaretagsthatclosethemselveswithoutneedingaseparateclosingtag,simplifyingmarkupstructureandenhancingcodingefficiency.1)TheyareessentialinXMLforelementswithoutcontent,ensuringwell-formeddocuments.2)InHTML5,usageisflexiblebutr
Beyond HTML: Essential Technologies for Web DevelopmentApr 26, 2025 am 12:04 AMTo build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.
What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AMBoolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.
How can you validate your HTML code?Apr 24, 2025 am 12:04 AMHTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.
HTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AMHTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.
HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AMThe function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.
The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AMThe future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
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
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Dreamweaver CS6
Visual web development tools
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
Atom editor mac version download
The most popular open source editor
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
