Question 166297 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I control size & position of images in WordPress?

I’m making a website 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>

Also note that I’m a beginner at programming. The code above is a mix of templates I found online and some help from a friend.

Tags:

3

Answers


  1. 0

    You can use margin property of css, or I tried it myself, and there might be some other css code overlapping yours since when I changed the width of my three images, they appeared on one line

    Edit: @MrMcGoofy, the example code is:

    <!DOCTYPE html>
<html style="background: black;" lang="en-US"><head>
    <title>TITLE</title>
    <style>
        #one{
            /*Add the css you want, but this one wouldn't need margin*/
        }
        #two{
            margin-bottom: /*Play around with the value until you get the desired result , also try to change the margin-bottom to margin-top/left/right*/;
        }
        #three{
            margin-bottom: /*Play around with the value until you get the desired result, also try to change the margin-bottom to margin-top/left/right*/;
        }
    </style>
</head>
<body>
    <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="1.jpg" width="40%" id="one">
    <img src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706__340.jpg" alt="2.jpg" width="40%" id="two">
    <img src="https://cdn.pixabay.com/photo/2015/10/12/14/59/milky-way-984050__340.jpg" alt="3.jpg" width="40%" id="three">
</body>
</html>
    Login or Signup to reply.
  2. 0

    try to use in your image tag position:absolute; and then use top and left;
    for example give top:50px; and left:100px; see what happens, play around with this…good luck
    and you can check this to see where i am coming from:
    https://css-tricks.com/absolute-positioning-inside-relative-positioning/

    Login or Signup to reply.
  3. 0

    About size it’s all about width and height properties, and about position. I think it depends on your website layout, but you can also use top, right, left, bottom.

    Hope I helped you enough.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search