Zoom hover

Michael Avrahami

• December 28, 2020 15:48

Hi

How would I apply this code to an element? It's from https://www.w3schools.com/howto/howto_css_zoom_hover.asp

<style>
.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>

<div class="zoom"></div>

0

• 

  Michael Avrahami

  • December 28, 2020 15:48

  For example to an image

  0
• 

  Alex

  • December 29, 2020 17:04

  Hi,

  you have to choose the properties you need and change the class or use "element". In the item settings panel, you have an option to add Custom CSS. Please refer to this screenshot: https://jmp.sh/WH8KvEP

  0
• 

  Michael Avrahami

  • December 29, 2020 17:14

  Thank you for getting to this Alex!
  
  New to this so can you please elaborate on this:

  "you have to choose the properties you need and change the class or use "element" "

  And how would this be done in Brizy WP? How would you go about adding to the general Custom CSS in appearance?

  0
• 

  Alex

  • December 29, 2020 17:59

  Hi,

  These changes would require some CSS knowledge. I hope you're familiar with this. 

  You have two possibilities to add custom CSS. You can add directly to the editor as I showed you in the previous screenshot or you can add a custom CSS class here and then using this class add the code from w3schools in WordPress settings.

  I would recommend you to check this video where Chris use Custom CSS and Brizy in WordPress: https://youtu.be/u6E-teK-TTs

  btw: You will probably need to use Inspect Element at some point to find the right class in case the changes do not apply.

   

  0

Please sign in to leave a comment.