How to enlarge images with css? (example of cool special effects)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to enlarge images with css? (example of cool special effects)

藏色散人

Aug 06, 2018 am 11:58 AM

This article mainly introduces how to use CSS to realize the image magnification function, that is, use the mouse to slide over the image to make it hover and enlarge, and then move away to return to normal size. The overall cool special effects can attract users to click on product images. Hope this article is helpful to everyone.

The specific code for css to implement image enlargement is as follows:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS图片放大特效示例</title>
    <script src="js/mootools-1.js" type="text/javascript"></script>
    <link rel="stylesheet" href="js/img-hover.css" type="text/css">
    <link rel="stylesheet" href="js/img-hover-main.css" type="text/css">
    <script src="js/browserCheck.js" type="text/javascript"></script>
</head><body>
<div id="logo"></div>
<div id="container">
    <div class="heading">CSS图片放大特效示例</div>
    <div id="image-container">
        <div class="img" id="img-1">
            <div class="mask"></div>
            <img  src="/static/imghwm/default1.png"  data-src="img/1.png"  class="lazy"   alt="How to enlarge images with css? (example of cool special effects)" >
        </div>
        <div class="img" id="img-2">
            <div class="mask"></div>
            <img  src="/static/imghwm/default1.png"  data-src="img/1.png"  class="lazy"   alt="How to enlarge images with css? (example of cool special effects)" >
        </div>
        <div class="img" id="img-3">
            <div class="mask" id="mask-1"></div>
            <div class="mask" id="mask-2"></div>
            <img  src="/static/imghwm/default1.png"  data-src="img/1.png"  class="lazy"   alt="How to enlarge images with css? (example of cool special effects)" >
        </div>
        <div class="img" id="img-4">
            <div class="mask"></div>
            <img  src="/static/imghwm/default1.png"  data-src="img/1.png"  class="lazy"   alt="How to enlarge images with css? (example of cool special effects)" >
        </div>
        <div class="img" id="img-5">
            <div class="mask"></div>
            <img  src="/static/imghwm/default1.png"  data-src="img/1.png"  class="lazy"   alt="How to enlarge images with css? (example of cool special effects)" >
        </div>
        <div class="img" id="img-6">
            <div class="mask"></div>
            <img  src="/static/imghwm/default1.png"  data-src="img/1.png"  class="lazy"   alt="How to enlarge images with css? (example of cool special effects)" >
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
    <br>
    <div id="warning" style="margin-top: 20px; text-align: center;"></div>
</div>
</body>
</html>

/*img-hover.css*/
.img{
   -webkit-transform:scale(0.6);
   -moz-transform:scale(0.6);
   -o-transform:scale(0.6);
   float:left;
   margin-left:-50px;
   margin-right:-50px;
   margin-top:-10px;
   -webkit-transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   }
.img img{
      padding:10px;
      border:1px solid #fff;
}
.img:hover{
   -webkit-transform:scale(0.8);
   -webkit-box-shadow:0px 0px 30px #ccc;
   -moz-transform:scale(0.8);
   -moz-box-shadow:0px 0px 30px #ccc; 
   -o-transform:scale(0.8);
   -o-box-shadow:0px 0px 30px #ccc;   
}   
.img .mask{
   width: 100%;
   background-color: rgb(0, 0, 0);
   position: absolute;
   height: 100%; 
   opacity:0.6;
   cursor:pointer;
   -webkit-transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -o-transition-duration:0.5s;
}
#img-1:hover .mask{
   height:0%; 
}
#img-2:hover .mask{
   height:0%; 
   margin-top:130px;
}
#img-4:hover .mask{
   margin-left:219px;
   margin-top:135px;
   height:0%;
   width:0%;
}
#img-3 #mask-1 {
   width:50%;
}
#img-3 #mask-2{
   width:50%;
   margin-left:211px;
}
#img-3:hover #mask-1{
   width:0%;
}
#img-3:hover #mask-2{
   margin-left:430px;
   width:0%;
}
#img-5:hover .mask{
   margin-left:219px;
   margin-top:135px;
   height:0%;
   width:0%;
   -webkit-transform: rotateX(360deg);
   -moz-transform: rotate(360deg);
   -o-transform: rotate(-360deg);
}
#img-6:hover .mask{
   margin-left:219px;
   margin-top:135px;
   height:0%;
   width:0%;
   -webkit-transform: rotateZ(750deg);
   -moz-transform: rotateZ(750deg);
   -o-transform: rotat(750deg);
}

/*img-hover-main.css*/
html{
   height:100%;
   margin:0;
   padding:0;
   width:100%;
   background-color:#242424;
   font-family:arial;
}
body{
   height:100%;
   margin:0 auto;
   padding:0;
   width:980px;
}
#logo  {
   background-color:#242424;
   color:#F1F1F1;
   font-size:43px;
   padding:15px 0 6px;
   text-shadow:0 0 2px #FFFFFF;
}
#logo a {
   color:#F1F1F1;
}
#container{
   width:100%;
   min-height:800px;
   background-color:#000;
}
a{
color: rgb(0, 114, 191); text-decoration: none;    
}
.heading{
   font-size:24px;
   color:#dfdfdf;
   text-align:center;
   padding-top:20px;
}
.legal{
   text-align:center;
   color:5f5f5f;
   font-size:16px;
   margin-top:100px;
   background:-moz-linear-gradient(center top , #000, #242424) repeat scroll 0 0 transparent;
   background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));
   background:-o-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));

}
a{
color: rgb(0, 114, 191); text-decoration: none;    
}
.warning{
   color:#555;
   text-align:center;
   font-size:12px;
}
.msg{
   color:#dfdfdf;
   text-align:center;
   font-size:14px;
   line-height:1.5em;
}
.clearfix{
   clear:both;
   float:none;
}

css to implement image enlargement. The display effect on the page is as follows:

How to enlarge images with css? (example of cool special effects)

【Recommended related articles】

Share one HTML css image magnifying effect code

CSS3 implemented image magnifying glass effect

CSS3 implemented five-point image magnifying glass

Jquery implements image magnification and click switching function example sharing

CSS3 mouse rotation and magnification effect after the image is rotated

The above is the detailed content of How to enlarge images with css? (example of cool special effects). 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

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

See all articles