.image-hover-layout .et_pb_blurb_content { max-width: 100%; } .image-hover-layout .et_pb_blurb_content img { width: 100%; } .image-hover-layout .et_pb_column { overflow: hidden; position: relative; } .image-hover-layout .et_pb_column img { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; } .image-hover-layout .et_pb_column:hover img { transform: scale(1.1); } .image-hover-layout .et_pb_column:hover .et_pb_main_blurb_image:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); content: ''; pointer-events: none; } .image-hover-layout .et_pb_main_blurb_image { margin: 0; } .image-hover-layout .et_pb_column .et_pb_blurb_content:before { top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: 0 0; transform-origin: 0 0; position: absolute; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; z-index: 1; pointer-events: none; } .image-hover-layout .et_pb_column .et_pb_blurb_content:after { top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; position: absolute; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; pointer-events: none; } .image-hover-layout .et_pb_column:hover .et_pb_blurb_content:before, .image-hover-layout .et_pb_column:hover .et_pb_blurb_content:after { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .image-hover-layout .et_pb_column .et_pb_blurb_container { opacity: 0; color: #fff; position: absolute; top: 40%; /* Adjust this if the text is in the wrong position */ width: 100%; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; margin: 0; padding: 0 55px; pointer-events: none; line-height: 1em !important; } .image-hover-layout .et_pb_column:hover .et_pb_blurb_container { opacity: 1; position: absolute; top: 45%; width: 100%; text-align: center; color: #fff; line-height: 1em !important; } .image-hover-layout.show-title h4 { background: #fff; padding: 10px!important; display: inline-block; margin-bottom: 10px; color: #333 !important; } .image-hover-layout.show-title .et_pb_blurb_container { opacity: 1; top: 45%; } .image-hover-layout.show-title .et_pb_column:hover .et_pb_blurb_container { opacity: 1; top: 40%; } .image-hover-layout.show-title .et_pb_blurb_container p { opacity: 0; } .image-hover-layout.show-title .et_pb_column:hover .et_pb_blurb_container p { opacity: 1; } .image-hover-gallery-layout .et_pb_gallery_item { overflow: hidden; position: relative; } .image-hover-gallery-layout .et_pb_gallery_item img { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; } .image-hover-gallery-layout .et_pb_gallery_item:hover img { transform: scale(1.1); } .image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_image:before { top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: 0 0; transform-origin: 0 0; position: absolute; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; z-index: 4; pointer-events: none; } .image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_image:after { top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; position: absolute; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; pointer-events: none; z-index: 4; } .image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_image:before, .image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_image:after { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_title, .image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_caption { opacity: 0; color: #fff; position: absolute; top: 40%; width: 100%; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; margin: 0; padding: 0 55px; pointer-events: none; line-height: 1em !important; z-index: 3; } .image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_title { opacity: 1; position: absolute; top: 45%; width: 100%; text-align: center; color: #fff; line-height: 1em !important; } .image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_caption { opacity: 1; position: absolute; top: 55%; width: 100%; text-align: center; color: #fff; line-height: 1em !important; } .image-hover-gallery-layout.show-title .et_pb_gallery_title, .image-hover-gallery-layout.show-title .et_pb_gallery_item:hover .et_pb_gallery_title { background: #fff; padding: 10px !important; margin: 0 auto; color: #333 !important; opacity: 1; left: 55px; right: 55px; width: initial; } .image-hover-gallery-layout.show-title .et_pb_gallery_item:hover .et_pb_gallery_title { top: 35%; }