图片上滑遮罩

@media only screen and (min-width: 768px) {

/* Add your Desktop Styles here */

.avia-image-container-inner { overflow:hidden;}

.avia-image-container-inner .av-image-caption-overlay{top:100%;transition: all 0.4s ease-in-out;}

.avia-image-container-inner:hover .av-image-caption-overlay{top:0;transition: all 0.4s ease-in-out;}

.avia-image-container-inner .avia_image{ position:relative; -webkit-transition: all 0.3s ease-in-out;

transition: all 0.4s ease-in-out;}

.avia-image-container-inner:hover .avia_image{

transition: all 0.4s ease-in-out;

-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);}

.av-overlay-hover-deactivate .av-caption-image-overlay-bg{opacity: 1 !important; }

.av-overlay-hover-deactivate:hover .av-caption-image-overlay-bg{opacity: 1 !important; }

.avia-image-container-inner .av-caption-image-overlay-bg{opacity: 1 !important; }

.avia-image-container-inner:hover .av-caption-image-overlay-bg{opacity: 1 !important; }

}

</style>

时间： 2024-08-02 04:31:23

图片上滑遮罩的相关文章

网站中图片上滑出现说明文字的特效

网站中为了美观也为了可以在一个区域中展示的信息更多的原因,可以看到很多图文混杂的特效. (这个的目标是单位面积上呈现给用户的信息量最多) 比如鼠标放到图片上,然后图片翻转到背面,而背面是图片的介绍信息比如鼠标放到图片上,然后从图片的下端或者任一端弹出对应介绍信息的图层,图片位置不变比如鼠标放到图片上,然后图片上移紧随着的是介绍信息的显示这篇博客是讲的以上说到的第三种比如. 图片特效展示如下: 起先:鼠标放上去:最后是: 原理: 这里a标签就包括图片和文字,其实图片和文字是一个整体,可以理解

为图片添加半透明遮罩效果

平时为图片添加半透明遮罩效果,我的做法如下:利用标签i实现背景半透明遮罩 <p class="opacity-black-position"><a href="#"><img src="images/4601.jpg" alt=""><i></i></a></p> 为html结构添加如下css样式: /* 利用标签i实现背景半透明遮罩, 兼容性

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д｀)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&

图片上传组件开发

我就要自行车 - 需求整理放眼WWW,一般的图片上传模块,主要就是实现了三个功能,图片的预览,图片的剪裁及预览,图片的上传,那我也就整这么一个吧,再细化一下需求. 图片的预览用户使用:用户点击“选择图片”,弹出文件浏览器,可以选择本地的图片,点击确认后,所选图片会按照原始比例出现在页面的浏览区域中. 组件调用:开发者可以自己定义图片预览区域的大小,并限定所传图片的文件大小和尺寸大小. 图片的剪裁用户使用:用户根据提示,在预览区域的图片上拖动鼠标框出想要上传的图片区域,并且能在结果预览区域看

jq upload图片上传代码

/* * 图片上传 * */ function postImgData() { $("#addFileInfo input[name='file']").change(function () { console.log($(this).val()) if (!$(this).val()) { return } var fileTyle = $(this).val().split("."); console.log(fileTyle); if (fileTyle[1]

阻止用户双击使屏幕上滑

/*阻止用户双击使屏幕上滑*/var agent = navigator.userAgent.toLowerCase(); //检测是否是iosvar iLastTouch = null; //缓存上一次tap的时间if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){ document.body.addEventListener('tou

[项目构建五]babasport ajax图片上传及FastDFS入门案例.

今天来开始写图片上传的功能, 现在的图片上传都讲求上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jquery.form.js剩下的一个是FastDFS, 那么什么是FastDFS呢? FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成,主要解决了海量数据存储问题,特别适合以中小文

ckeditor4.5.1配置图片上传的方法

本篇博文主要面向初学者,一步一步地实现ckeditor的图片上传,欢迎各位大神指正. ckeditor的图片上传默认是关闭的,网上也有很多相关的教程,可是不是讲的不完整,就是版本太旧已经不适用.我写这篇博文主要面向初学者,有错误的地方欢迎指正. 截止本文撰写,ckeditor最新版本是4.5.1,我下载的版本是4.5.1standard,如果本文的方法不管用,请下载同一版本尝试. 1.开启图片上传界面文件地址:ckeditor/plugins/image/dialogs/image.js 搜索

数往知来 JQuery 图片上传_水印 <二十二>

一.图片上传 :enctype='multipart/form-date 首先在进行文件上传时,添加form表单中的enctype属性指定enctype='multipart/form-date', 文件数据发送给服务端,并不是把文件路径发送给服务端了,它会随机生成一个分割字符串, 把每一个表单元素分割开 <form method='post' action='' enctype='multipart/form-date'> //这里的enctype是提交请求报文的报文体的一种编码格式, 默