How do I control the position and size of my images?

  • Unknown's avatar
    thegorupad9149 · Member ·

    I’m making a website same as http://www.hydrogenwatermaker.net in wordpress.com and I’m trying to figure out how to control where an image is placed? Currently I can only place an image below or above another and it looks really messy. Is there a way to control the coordinates using html or CSS? Preferably html because I want different positions for different images.

    Here is the code of my images so far:

        .container {
      position: relative;
      width: 400px;
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #008CBA;
    }
    
    .container:hover .overlay {
      opacity: 1;
    }
    
    .projeto01 {
      color: white;
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
  <div class="grid-portefolio">
    
    <div class="container">
    
    <a href="https://en.wikipedia.org/wiki/Main_Page"><img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/><div class="overlay"><div class="projeto01">Albert Lee<br>Banks Electorate</div></div></a>
    
    
    </div>
  • staff-blorbo · Staff ·

    I don’t see any WordPress.com sites under your account here.

    What is the URL of the site with the problem?

    NOTE: We can only assist with websites hosted here at WordPress.com. If you’re using the WordPress software, but hosted elsewhere, you will need to reach out to your hosting provider or the WordPress.org community for guidance: https://wordpress.org/support/

  • The topic ‘How do I control the position and size of my images?’ is closed to new replies.