Advertisement
Seb3ejoueur

Image Hover with text

Dec 7th, 2016
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.81 KB | None | 0 0
  1. .border-hover .et_pb_column {
  2.  overflow: hidden;
  3.  position: relative;
  4. }
  5.  
  6. .border-hover .et_pb_column img {
  7.  -webkit-transition: all 0.5s ease-in-out;
  8.  -moz-transition: all 0.5s ease-in-out;
  9.  transition: all 0.5s ease-in-out;
  10. }
  11.  
  12. .border-hover .et_pb_column:hover img {
  13.  transform: scale(1.1);
  14. }
  15.  
  16. .border-hover .et_pb_column:hover .et_pb_image:after {
  17.  position: absolute;
  18.  top: 0;
  19.  left: 0;
  20.  width: 100%;
  21.  height: 100%;
  22.  background: rgba(0,0,0,0.4);
  23.  content: '';
  24. }
  25.  
  26. .border-hover .et_pb_column .et_pb_promo_description:before {
  27.  top: 50px;
  28.  right: 30px;
  29.  bottom: 50px;
  30.  left: 30px;
  31.  border-top: 1px solid #fff;
  32.  border-bottom: 1px solid #fff;
  33.  -webkit-transform: scale(0,1);
  34.  transform: scale(0,1);
  35.  -webkit-transform-origin: 0 0;
  36.  transform-origin: 0 0;
  37.  position: absolute;
  38.  content: '';
  39.  opacity: 0;
  40.  -webkit-transition: opacity 0.35s,
  41.  -webkit-transform 0.35s;
  42.  transition: opacity 0.35s, transform 0.35s;
  43. }
  44.  
  45. .border-hover .et_pb_column .et_pb_promo_description:after {
  46.  top: 30px;
  47.  right: 50px;
  48.  bottom: 30px;
  49.  left: 50px;
  50.  border-right: 1px solid #fff;
  51.  border-left: 1px solid #fff;
  52.  -webkit-transform: scale(1,0);
  53.  transform: scale(1,0);
  54.  -webkit-transform-origin: 100% 0;
  55.  transform-origin: 100% 0;
  56.  position: absolute;
  57.  content: '';
  58.  opacity: 0;
  59.  -webkit-transition: opacity 0.35s,
  60.  -webkit-transform 0.35s;
  61.  transition: opacity 0.35s, transform 0.35s;
  62. }
  63.  
  64. .border-hover .et_pb_column:hover .et_pb_promo_description:before, .border-hover .et_pb_column:hover .et_pb_promo_description:after {
  65.  -webkit-transition-delay: 0.15s;
  66.  transition-delay: 0.15s;
  67.  opacity: 1;
  68.  -webkit-transform: scale(1);
  69.  transform: scale(1);
  70. }
  71.  
  72. .border-hover .et_pb_column .et_pb_promo_description h2 {
  73.  opacity: 0;
  74.  color: #fff;
  75.  position: absolute;
  76.  top: 37%;
  77.  width: 100%;
  78.  text-align: center;
  79.  -webkit-transition: all 0.5s ease-in-out;
  80.  -moz-transition: all 0.5s ease-in-out;
  81.  transition: all 0.5s ease-in-out;
  82.  margin: 0;
  83.  padding: 0;
  84. }
  85.  
  86. .border-hover .et_pb_column .et_pb_promo_description p {
  87.  opacity: 0;
  88.  color: #fff;
  89.  position: absolute;
  90.  top: 42%;
  91.  width: 100%;
  92.  text-align: center;
  93.  -webkit-transition: all 0.5s ease-in-out;
  94.  -moz-transition: all 0.5s ease-in-out;
  95.  transition: all 0.5s ease-in-out;
  96. }
  97.  
  98. .border-hover .et_pb_column:hover .et_pb_promo_description h2 {
  99.  opacity: 1;
  100.  position: absolute;
  101.  top: 40%;
  102.  width: 100%;
  103.  text-align: center;
  104.  color: #fff;
  105. }
  106.  
  107. .border-hover .et_pb_column:hover .et_pb_promo_description p {
  108.  opacity: 1;
  109.  position: absolute;
  110.  top: 50%;
  111.  width: 100%;
  112.  text-align: center;
  113.  color: #fff;
  114. }
  115.  
  116. .border-hover .et_pb_promo {
  117.  position: absolute;
  118.  top: 0;
  119.  left: 0;
  120.  width: 100%;
  121.  height: 100%;
  122. }
  123.  
  124. .border-hover .et_pb_promo_button {
  125.  opacity: 0;
  126.  position: absolute;
  127.  top: 0;
  128.  left: 0;
  129.  width: 100%;
  130.  height: 100%;
  131. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement