'How to put a image with title & description together? [closed]

I was wondering how I could make a image that on the side of it would have a title and description that linked to another page. I want it to look similar to what http://www.coolmath-games.com/ has for its game links as I am also making a game website.

I have done research around this and cant find any thing that looks similar! I also tried to inspect element and see how they did it but I could not find anything there as it all seems to be done by css.

htmlcss


Solution 1:[1]

You haven't done your research thoroughly enough since it is quite easy to accomplish that:

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  padding: 2rem;
  box-sizing: border-box;
  font: 1.6rem/1.3 arial, sans-serif;
}

.imgBox {
  width: 34.4rem;
  clear: both;
  margin-bottom: 1.5rem;
}

.imgBox img {
  float: left;
  margin-right: 0.5rem;
}

.imgBox p {
  display: inline;
}

.imgBox a {
  text-decoration: none;
  color: #1565C0;
}
<div class="imgBox">
  <a href="https://stackoverflow.com/">
    <img src="http://via.placeholder.com/117x66" alt="someImageDescription" />
    <h3>Some Title</h3>
  </a>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>

<div class="imgBox">
  <a href="https://stackoverflow.com/">
    <img src="http://via.placeholder.com/117x66" alt="someImageDescription" />
    <h3>Some Title</h3>
  </a>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>

<div class="imgBox">
  <a href="https://stackoverflow.com/">
    <img src="http://via.placeholder.com/117x66" alt="someImageDescription" />
    <h3>Some Title</h3>
  </a>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anonymous

Related Questions