css实现鼠标悬浮弹出文字层动画效果代码-html代码-BFW代码库

css实现鼠标悬浮弹出文字层动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现鼠标悬浮弹出文字层动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
p {
  margin: 0;
  padding: 0;
}

.content-item {
  background: url(//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_370,/quality,q_90);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 300px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  width: 400px;
}
.content-item .overlay {
  border-bottom: 100px solid #e8c63d;
  border-left: 100px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .95;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 0;
}
.content-item:hover .overlay {
  border-bottom: 800px solid #e8c63d;
  border-left: 800px solid transparent;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item .corner-overlay-content {
  bottom: 15px;
  color: #333;
  position: absolute;
  right: 15px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item:hover .corne.........完整代码请登录后点击上方下载按钮下载查看