Guenni007

image

Aug 11th, 2021 (edited)
302
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.51 KB | None | 0 0
  1. /* ======================================================================================================================================================
  2. Image
  3. ====================================================================================================================================================== */
  4. .avia-image-container{
  5.     display: block;
  6.     position: relative;
  7.     max-width: 100%;
  8. }
  9.  
  10. .avia-image-container-inner,
  11. .avia_image,
  12. .av-image-caption-overlay{
  13.     -webkit-border-radius: 3px;
  14.     -moz-border-radius: 3px;
  15.     border-radius: 3px;
  16.     display: block;
  17.     position: relative;
  18.     max-width: 100%;
  19. }
  20.  
  21. .avia-image-container.avia-align-center{display:block; margin: 0 auto 10px auto;  text-align: center;  clear: both;}
  22. .avia-image-container.avia-align-center .avia-image-container-inner{margin:0 auto; display:inline-block; vertical-align:bottom}
  23. .avia-image-container.avia-align-left{display:block; float:left; margin-right: 15px; margin-top: 5px;}
  24. .avia-image-container.avia-align-right{display:block; float:right; margin-left: 15px; margin-top: 5px;}
  25. .avia-image-container.avia-align-center.avia-builder-el-no-sibling{margin-bottom:0; margin-top:0;}
  26.  
  27. .avia_image + br{
  28.     display: none;
  29. }
  30.  
  31. .avia-image-overlay-wrap a.avia_image{
  32.     overflow: hidden;
  33. }
  34.  
  35. .avia-image-overlay-wrap a.avia_image .image-overlay{
  36.     -webkit-transform: scale(1.5);
  37.     -ms-transform: scale(1.5);
  38.     transform: scale(1.5);
  39. }
  40.  
  41. .avia-image-container .avia_image,
  42. .avia-image-container .avia-image-overlay-wrap{
  43.     -webkit-transition: all 0.7s;
  44.     transition: all 0.7s;
  45. }
  46.  
  47. .avia-image-container.av-hover-grow img:hover,
  48. .avia-image-container.av-hover-grow .avia-image-overlay-wrap:hover{
  49.     -webkit-transform: scale(1.1);
  50.     transform: scale(1.1);
  51. }
  52.  
  53. .avia-image-container.av-hover-grow,
  54. .avia-image-container.av-hover-grow .avia-image-container-inner,
  55. .avia-image-container.av-hover-grow .avia-image-overlay-wrap a.avia_image{
  56.     overflow: visible;
  57. }
  58.  
  59. .avia-image-container.av-hover-grow.av-hide-overflow,
  60. .avia-image-container.av-hover-grow.av-hide-overflow .avia-image-container-inner,
  61. .avia-image-container.av-hover-grow.av-hide-overflow .avia-image-overlay-wrap a.avia_image {
  62.     overflow: hidden;
  63. }
  64.  
  65. /*styling variations*/
  66.  
  67. .av-styling-circle .avia-image-container-inner,
  68. .av-styling-circle .avia_image,
  69. .av-styling-circle .av-image-caption-overlay,
  70. .av-styling-circle div.av-caption-image-overlay-bg{
  71.     overflow: hidden;
  72.     -webkit-border-radius: 10000px;
  73.     -moz-border-radius: 10000px;
  74.     border-radius: 10000px;
  75. }
  76.  
  77. .avia-safari div.av-image-caption-overlay-center{-webkit-transform:translate3d(0,0,0); }/*flicker fix for caption in safari*/
  78.  
  79. .av-styling-no-styling .avia-image-container-inner,
  80. .av-styling-no-styling .avia_image,
  81. .av-styling-no-styling .av-image-caption-overlay{
  82.     -webkit-border-radius: 0;
  83.     -moz-border-radius: 0;
  84.     border-radius: 0;
  85.     border:none;
  86. }
  87.  
  88. /*captions*/
  89. .av-image-caption-overlay{
  90.     position: absolute;
  91.     height:100%;
  92.     width:100%;  
  93.     z-index: 10;
  94.     text-align: center;
  95.     -webkit-transition: all 0.3s ease-in-out;
  96.     transition: all 0.3s ease-in-out;
  97. }
  98.  
  99. .avia-msie-8 .av-image-caption-overlay{background: #000; filter:alpha(opacity=40); }
  100. .av-image-caption-overlay-position{display: table; width: 100%; height:100%; position: relative; }
  101. .av-image-caption-overlay-center{display:table-cell;  vertical-align: middle; font-size: 1.3em; line-height: 1.5em; padding: 0px 1.5em; }
  102. .av-image-caption-overlay-center p:first-child{margin-top:0;}
  103. .av-image-caption-overlay-center p:last-child{margin-bottom:0;}
  104.  
  105. .av-caption-image-overlay-bg{position: absolute; height:100%; width:100%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
  106. /*** Guenni007 - removed the !important setting from next hover style ***/
  107. .av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg{opacity: 0;}
  108. .av-overlay-on-hover .av-image-caption-overlay{opacity: 0; filter:alpha(opacity=00); }
  109. .av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay{opacity: 1; filter:alpha(opacity=100);}
  110.  
  111. .avia_transform .avia_animated_image{
  112.     opacity: 0;
  113. }
  114.  
  115.  
  116. /* image copyright */
  117. .avia-image-container small.avia-copyright{
  118.     font-size: 0.8em;
  119.     text-align: left;
  120.     line-height: 1.7em;
  121. }
  122. /* Simple */
  123.  
  124. .avia-image-container .avia-copyright{
  125.     display: block;
  126. }
  127.  
  128. .avia-image-container.av-has-copyright .avia-image-overlay-wrap{
  129.     position: relative;
  130.     overflow: hidden;
  131. }
  132.  
  133. .av-styling-circle.avia-image-container.av-has-copyright .avia-image-container-inner{
  134.     overflow: visible;
  135. }
  136.  
  137. .avia-image-container.av-has-copyright.av-styling-circle .avia-copyright{
  138.     text-align: center;
  139. }
  140.  
  141. /* Icon Reveal on Hover */
  142.  
  143. .avia-image-container.av-has-copyright.av-copyright-icon-reveal .avia-copyright{
  144.     position: absolute;
  145.     background-color: rgba(0,0,0,0.1);
  146.     text-align: right;
  147.     color: #fff;
  148.     padding: 0 2em 0 0;
  149.     right: 0;
  150.     bottom: 0;
  151.     width: 2em;
  152.     line-height: 2em;
  153.     max-height: 2em;
  154.     text-indent: -99999px;
  155.     overflow: hidden;
  156.     transition: all 0.3s ease-in;
  157.     z-index: 308;
  158. }
  159.  
  160. .avia-image-container.av-has-copyright.av-copyright-icon-reveal .avia-copyright:hover{
  161.     width: 100%;
  162.     padding: 0 3em 0 1em;
  163.     text-indent: 0;
  164.     max-height: 100%;
  165.     background-color: rgba(0,0,0,0.4);
  166. }
  167.  
  168. .avia-image-container.av-has-copyright.av-copyright-icon-reveal .avia-copyright:after{
  169.     content: "\E81e";
  170.     font-family: "entypo-fontello";
  171.     display: block;
  172.     position: absolute;
  173.     right: 0;
  174.     bottom: 0;
  175.     text-indent: 0;
  176.     font-size: 0.8em;
  177.     width: 2.6em;
  178.     height: 2.6em;
  179.     line-height: 2.8em;
  180.     text-align: center;
  181.     color: rgba(255,255,255,0.7);
  182.     -webkit-border-radius: 3px;
  183.     -moz-border-radius: 3px;
  184.     border-radius: 3px;
  185.     cursor: pointer;
  186. }
  187.  
  188. .avia-image-container.av-has-copyright.av-copyright-icon-reveal .avia-copyright:hover:after{
  189.     background-color: rgba(0,0,0,0.2);
  190.     color: rgba(255,255,255,1);
  191. }
  192.  
  193.  
  194. .avia-image-container.av-styling-circle.av-has-copyright.av-copyright-icon-reveal .avia-copyright{
  195.     -webkit-border-radius: 20px;
  196.     -moz-border-radius: 20px;
  197.     border-radius: 20px;
  198.     background-color: rgba(0,0,0,0.15);
  199.     text-align: right;
  200. }
  201.  
  202. .avia-image-container.av-styling-circle.av-has-copyright.av-copyright-icon-reveal .avia-copyright:after{
  203.     -webkit-border-radius: 100%;
  204.     -moz-border-radius: 100%;
  205.     border-radius: 100%;
  206. }
  207.  
  208. .avia-image-container.av-styling-circle.av-has-copyright.av-copyright-icon-reveal .avia-copyright:hover{
  209.     -webkit-border-radius: 15px;
  210.     -moz-border-radius: 15px;
  211.     border-radius: 15px;
  212.     background-color: rgba(0,0,0,0.5);
  213. }
  214.  
  215.  
Add Comment
Please, Sign In to add comment