Zoom Image with Black Background on Hover

Description

• image with title/description (float on right of title), hover item will zoom image, change background, move text
• view demo – password: abc
• buy me a coffee

1. Install Code

#1.1. First add Section > Choose Team > Choose Section with auto layout icon

#1.2. Hover on top right of section > Click EDIT CONTENT

#1.2-2. at Design > Choose Simple List

#1.3. Next, click EDIT SECTION

#1.3-2. at Format > Anchor Link > enter word: zoom-img-bg-hover

#1.4. at Elements > Enable these

#1.5. at Content, enter your desired image/text

Like this

#1.6. Next, hover on Page where you use List > Click Gear icon > Click Advanced > Paste this code

<!-- 09.26c12v9 Zoom Image with Black Background on Hover -->
<script>
window.ZoomImageBackgroundHoverOptions = {
  sectionIdText: 'zoom-img-bg-hover',
  backgroundColor: '',
  borderRadius: '20px',
  zoomTextColor: '#000000',
  zoomSpaceTop: '40px',
  zoomSpaceSides: '40px',
  zoomSpaceBottom: '5px',
  hoverTextBottomSpace: '5px'
};
</script>
<script src="https://code.beaverhero.com/listsimple/0926c12v9zoomimageblackbghover.js"></script>

#2. Customize

#2.1. All options in the code

backgroundColor: '',
  borderRadius: '20px',
  zoomTextColor: '#000000',
  zoomSpaceTop: '40px',
  zoomSpaceSides: '40px',
  zoomSpaceBottom: '5px',
  hoverTextBottomSpace: '5px'