Hover Zoom

  •  

Directions:

  1. Copy CSS into your theme.
  2. Copy HTML into a Freeform block and replace dummy content.
  3. Add the class name of "HoverZoom" to your Freeform block under block properties.

Notes:

  1. Image size should be 600px x 400px

CSS Code

/* == HOVER ZOOM */
.HoverZoom{position:relative;margin-bottom:35px;}
.HoverZoom:hover .FlipText{transition:.7s;left:0;opacity:1;}
.HoverZoom:before{width:100%;position:absolute;top:-3px;left:0px;height:2px;background:var(--color-brand-primary);content: ".";background-size:cover;z-index:2;}
.HoverZoom p{margin:0}
.HoverZoom p:first-of-type{overflow:hidden;}
.HoverZoom img{width:100%;float:left;transition: all 1s ease 0s;}
.HoverZoom:hover a img{transform: scale(1.1);transform-origin: center;}
.HoverZoom .TextContainer{position:absolute;top:0;left:0;max-height:100%;overflow-y: auto;position:absolute;left:0%;width:100%;padding:0 7.5% 0 7.5%;top:50%;transform: translateY(-50%);}
.HoverZoom .TextContainer *{color:#fff;}
.HoverZoom .Tag{position:absolute;left:-10px;top:-15px;font-size:1.6rem;color:#fff;padding:6px 10px;background:var(--color-brand-primary);z-index:5;font-weight:600;}
.HoverZoom .Tag:after{content:'';position:absolute;top:100%;left:0;border-top:solid 10px var(--color-brand-primary);border-left:solid 10px transparent;}


HTML Code


<p><a href="#" linktype="2" target="_self"><img alt="Zoom Block" src="https://developers.titancms.com/Images/Developer-Notes/ZoomBlock.jpg" /></a>
</p>
<p class="Tag">Hover Zoom
</p>
<div class="TextContainer">
  <h3 style="text-align:center">Zoom Bucket
  </h3>
  <p style="text-align:center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</div>

 

Hover Zoom

 

Zoom Block

Zoom Bucket

Hover Zoom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Zoom Block

Zoom Bucket

Hover Zoom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Variations

Zoom Block

Zoom Bucket

Zoom Block

Zoom Block

Hover Zoom

© 2017 Northwoods - all rights reserved.
top