[Support request] adding html and css to a individual page

Home Forums Support adding html and css to a individual page

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #851702
    Oscar

    Hi, I’m trying to add custom HTML and CSS code to a specific page. This is the code I’m trying to add:

    HTML

    <div class="container">
      <img src="https://ninfuscs.com/wp-content/uploads/2019/02/Diseño-Creativo.png" alt="" />
      <p class="title">diseño gráfico</p>
      <div class="overlay"></div>
      
    </div>
    
    CSS
    
    .container {
      position: relative;
      margin-top: 50px;
      width: 500px;
      height: 300px;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      transition: background 0.5s ease;
    }
    
    .container:hover .overlay {
      display: block;
      background: rgba(0, 0, 0, .3);
    }
    
    img {
      position: absolute;
      width: 500px;
      height: 300px;
      left: 0;
    }
    
    .title {
      position: absolute;
      width: 500px;
      left: 0;
      top: 120px;
      font-weight: 700;
      font-size: 30px;
      text-align: center;
      text-transform: uppercase;
      color: white;
      z-index: 1;
      transition: top .5s ease;
    }
    
    .container:hover .title {
      top: 90px;
    }
    
    .button {
      position: absolute;
      width: 500px;
      left:0;
      top: 180px;
      text-align: center;
      opacity: 0;
      transition: opacity .35s ease;
    }
    
    .button a {
      width: 200px;
      padding: 12px 48px;
      text-align: center;
      color: white;
      border: solid 2px white;
      z-index: 1;
    }
    
    .container:hover .button {
      opacity: 1;
    }
    

    The problem is that adding this code affects the appearance of the whole site.

    What could be the solution to add the code without damaging the rest of the site?

    This is the page: https://ninfuscs.com/services-test/

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #851768
    David
    Staff
    Customer Support

    Hi there,

    the container class is used by the theme hence its effecting the entire site.
    Make your custom classes more unique and specific to its purpose.

    E.g i am making a call to action container so i may call it cta-container

    If i want to be really safe i would prefix the classes with my initials eg. db-cta-container this will minimise it from conflicting and makes it easily recognisable.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.