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

Question

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

971 views Asked by MrMcGoofy At 25 April 2021 at 15:17

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.

Original Q&A

There are 3 answers

Aysun Itai On 26 April 2021 at 07:38

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/

a7mad saeed On 26 April 2021 at 07:45

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.

**Yung** · Accepted Answer · 2021-04-25 18:08:55

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>

TechQA.

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

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in WORDPRESS

Related Questions in POSITION

Related Questions in WORDPRESS.COM

Popular Questions

Popular Tags

Trending Questions