CSS3图片以中心缩放,放大超出隐藏实现
首页,重点是有一个包裹img标签的容器,这里我们给该容器设置一个class为selfScale
<div class="selfScale">
<img sr="#" />
</div>
接下来,给样式
.selfScale{//容器
cursor: pointer;
width: %;
overflow: hidden;
position: relative;
}
.selfScale img{//容器中东西
width: %;
top: ;
position: relative;
left: ;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
-o-transition: -o-transform .3s;
transition: transform .3s;
}
.selfScale img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
这样就可以实现在指定容器中缩放图片了。
效果图的变化如下:
默认情况下的图片:
鼠标移入放大后的图片:
CSS3图片以中心缩放,放大超出隐藏实现的更多相关文章
- 在WPF里面实现以鼠标位置为中心缩放移动图片
原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片, ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- 用开源项目PhotoView实现图片的双指缩放和双击放大缩小
项目地址:https://github.com/chrisbanes/PhotoView 用开源项目有个好处,一是实现简单,二是bug少.那么我们就来说下这个项目能够实现的效果: 1.单个图片的双指缩 ...
- 基于CSS3图片悬停放大特效
今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...
- HTML+css3 图片放大效果
<div class="enlarge"> <img src="xx" alt="图片"/> </div> ...
- 在viewPager中双指缩放图片,双击缩放图片,单指拖拽图片
我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- 记一次产品需求:图片等比缩放和CSS自适应布局16:9
前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...
- CSS3鼠标滑过图标放大以及旋转
本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...
随机推荐
- 关于UML方法学图中类之间的关系:依赖,泛化,关联
类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中,每个类具有一定的职责,职责指的是类所担任的任务,即类要完成什 ...
- js字符串转dom
function parse2dom(str){ var div = document.createElement("div"); if(typeof str == "s ...
- The tag handler class for "c:set"(org.apache.taglibs.standard.tag.rt.core.UrlTag)was not found on the Java Build Path
1.源码: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> < ...
- ural 2014 Zhenya moves from parents
2014. Zhenya moves from parents Time limit: 1.0 secondMemory limit: 64 MB Zhenya moved from his pare ...
- Python正则表达式之 - ?: / ?= / ?!
Python正则表达式之 - ?: / ?= / ?! 用圆括号将所有选择项括起来,相邻的选择项之间用|分隔.但用圆括号会有一个副作用,使相关的匹配会被缓存,此时可用?:放在第一个选项前来消除这种副作 ...
- LeetCode OJ:Construct Binary Tree from Preorder and Inorder Traversal(从前序以及中序遍历结果中构造二叉树)
Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- 剑指offer--5.变态跳台阶
WA了一次,错误数据4,输出8,怎么真么熟悉呢?改个return过了,OMG ------------------------------------------------------------- ...
- nyoj-1092-数字分隔(二)
java大法好啊 思路:单独拿出整数部分分隔 题目链接 import java.math.BigDecimal; import java.util.Scanner; public class Main ...
- FAT-fs (mmcblk0p1): Volume was not properly unmounted. Some data may be corrupt. Please run fsck.
/******************************************************************************** * FAT-fs (mmcblk0p ...
- bzoj3597 方伯伯运椰子
有一个 DAG,有一个源点,一个汇点和很多条边,每条边有花费 $d_i$ 和最大流量 $c_i$,可以花 $b_i$ 的钱把最大流量增加 $1$,花 $a_i$ 的钱把最大流量减少 $1$ 现在要进行 ...