Jump to content

CSS-Image-Gallery


Hoock

Recommended Posts

I wonder if someone could be kind, and help me changing this CSS-Image Gallery listed below.

I would like it to be vertically, with the image at the left, and the text/description to the right of the image. At the same time if possible it would be great to have with a max width of 700 px.  I would need to be able to add and take of images and texts all the time.  As new items and descriptions will be added and sold items, taken of, just as I can do now.

IMAGE  -  TEXT/DESCRIBTION

IMAGE  -  TEXT/DESCRIBTION

IMAGE  -  TEXT/DESCRIBTION

< ---------------------- max width ------700 px. ------------------à

<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="fjords.jpg">
    <img src="fjords.jpg" alt="Fjords" width="300"height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300"height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300"height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Link to comment
Share on other sites

  • 1 month later...

Hi

I can see that I did not have any respponce here, but I found it on another forum. If someone else should be interested in a vertical image gallery, they could look at this:

<html>

<head>

 

 

<style>

div.principal {    

display: flex;    

justify-content: center;    

clear: both;    

float: none;    

width: 100%; max-width:700px;

margin: 0 auto;

}

 

div.img {

margin: 20px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

 

div.img:hover {

border: 1px solid #777;

}

 

div.img img {

width: 100%;

height: auto;

}

 

div.desc {

float: left;

width: 65%;

padding: 15px;

text-align: left;

}

 

</style>

</head>

 

<body>

 

<div class="principal"> <div class="img"> <a target="_blank" href="fjords.jpg"> <img src="fjords.jpg" alt="Fjords"> </a></div> <div class="desc">Add a description of the image here. Add a description of the image here Add a description of the image here Add a description of the image here</div>

</div>

<div class="principal"> <div class="img"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest"> </a></div> <div class="desc">Add a description of the image here</div> </div>

<div class="principal"> <div class="img"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights"> </a></div> <div class="desc">Add a description of the image here</div>

</div>

</body>

</html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...