鼠标hover元素scale/zoom中心点放大效果实例页面

CSS代码:
.box {
    /* 可见视觉区域 */
    width: 480px; height: 250px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.size {
    /* 广阔的海洋 */
    width: 1000px; height: 1000px;
    position: absolute; left: 50%; top: 50%;
    margin: -500px 0 0 -500px;
    /* 水平居中 */
    text-align: center;
}
.zoom {
    /* 缩放的元素 */
    width: 480px; height: 250px;
    vertical-align: middle;
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
}
.box:hover .zoom {
    /* hover放大 */
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    zoom: 1.05;
}
:root .box:hover .zoom {
    zoom: 1;
}
.middle {
    /* 垂直居中 */
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
HTML代码:
<h4>左上角定位</h4>
<div class="box">
	<img src="20150213142143589.png" class="zoom">
</div>
<h4>居中定位</h4>
<div class="box">
    <div class="size">
        <img src="20150213142143589.png" class="zoom"><i class="middle"></i>
    </div>
</div>
时间: 2024-10-08 02:58:16

鼠标hover元素scale/zoom中心点放大效果实例页面的相关文章

CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

在css中vw和vh分别代表所占的百分比,可以设置最外部的容器的宽高,但是都要结合百分比一起使用. 展示 回到相关文章 ? 图片宽度(目前1024像素): 128  1024 点击我出现图片弹框 代码CSS代码:.dialog_container {    display: none;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    background-color: rgba(0,0,0,.35); 

渐进实现点点点loading效果实例页面

CSS代码: .dotting { display: inline-block; min-width: 2px; min-height: 2px; box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; -webkit-animation: dot 4s infinite step-start both; animation: dot 4s infinite step-start both; *zoom:

animation渐进实现点点点等待效果实例页面

CSS代码: .ani_dot { font-family: simsun; } :root .ani_dot { display: inline-block; width: 1.5em; vertical-align: bottom; overflow: hidden; } @-webkit-keyframes dot { 0% { width: 0; margin-right: 1.5em; } 33% { width: .5em; margin-right: 1em; } 66% { wi

浅谈CSS和JQuery实现鼠标悬浮图片放大效果

对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3和HTML,Java的小伙伴不要绕道~~~ 言归正传,那么我们首先要完成什么样的图片处理呢? 一.CSS3图片的放大 css3中,有一个属性transform,官方的解释是:允许向元素应用2D或3D的转换.这些转换当然就包含旋转.缩放.移动或倾斜了.有兴趣的同学可以继续了解http://www.w3

简单的圆形图标鼠标hover效果 | CSS3教程

演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animations来制作.图标的创建将使用IcoMoon app来完成. 注意:不是每一个浏览器都支持伪元素,最好是使用Chrome或Firefox浏览器观看. HTML结构: 图标组的结构是使用一个div包含一组a元素,给每个a元素设置图标class. <div class="hi-icon-wrap hi

JS实现导航条效果——current跟随鼠标hover移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色 单个颜色实现 hover 和 active 时的明暗变化效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

第44天:鼠标移动放大效果

1.鼠标移动放大效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鼠标移动放大效果</title> 6 <style> 7 .box{ 8 width: 350px; 9 height: 350px; 10 position: relative; 11 margin:

CSS实现DIV感应鼠标Hover时的显示隐藏效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现DIV感应鼠标Hover时的显示隐藏效果</title> <style> .wrap{} .wrap .box{border:2px solid red;width:200px;height:200px;float:left;margi