Jump to content

Search the Community

Showing results for tags 'code snippet'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. I’m having trouble adding custom css for an element I’ll use on the products page. The custom Css is as below: .specs_container { position: absolute; width: 100%; } .specs_image { display: block; width: 100%; height: auto; } .specs_overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #f2ba02; } .specs_container:hover .specs_overlay { opacity: 1; } .specs_text { color: white; font-size: 20px; position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .specs_centered { color: white; font-size: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } I add this to Custom CSS on theme options. Then on products page I add a code snippet. Insert this code there: <div class="specs_container"> <img src="xyz.png" alt="xyz" class="specs_image"> <div class="specs_centered">CENTERED</div> <div class="specs_overlay"> <div class="specs_centered">CENTERED</div> <div class="specs_text">Hello World</div> </div> </div> And call the extra classes below as: specs_container specs_image specs_centered specs_overlay specs_centered specs_text But when I run it, none of them shows on the page. Note that I’ll have 3 columns of these snippets next to each other. So there might be something wrong with the coding perhaps. But I place 3 code snippets with 1/3 width to the page builder and then fill them in with the code. Basically, the goal is to have 3 different images next to each other, with each of them having a title over the image. When hovered, it should fade into a solid color, the title should stay where it is, and more text should appear below the title. This is the page the code is live: https://www.arielrider.com/product/demo-copy/ Can anyone help me with this?
×
×
  • Create New...