HTML/CSS Image Text

Hi there,
For my website, I have some pictures that I put into a simple gallery, but I would like to make it so I can also mouse over these existing pictures and have a caption on top of the image.

The CCS/HTML was using .gallery and div class “gallery cf” if this info is useful.

Can someone please help?

Without seeing your code, that could be rather difficult.

When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

1 Like

Here’s a sample of the code. The picture apparels twice, once with the CSS and once with the caption.

<h1>SGC Photo Gallery</h1>

<div class="gallery cf">
  <div>
    <img src="https://www.terpconnect.umd.edu/~ankeyes/SGC/SGC_Service_Day.png"/>
  </div>

<style>
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.gallery {
  width: 500px;
  margin: 0 auto;
  padding: 5px;
  background: #9370DB;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.gallery > div {
  position: relative;
  float: left;
  padding: 5px;
}

.gallery > div > img {
  display: block;
  width: 200px;
  transition: .1s transform;
  transform: translateZ(0); 
}

.gallery > div:hover {
  z-index: 1;
}

.gallery > div:hover > img {
  transform: scale(1.7,1.7);
  transition: .3s transform;
}

.cf:before, .cf:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after {
  clear: both;
}

h1 {
  margin: 40px 0;
  font-size: 30px;
  font-weight: 300;
  text-align: center;
}

</style>


<div id="picture">
<img src=https://www.terpconnect.umd.edu/~ankeyes/SGC/SGC_Service_Day.png width=480 height=320><br>
On August 26, 2016, we participated in Service Day and helped clean up Kenilworth Park & Aquatic Gardens in DC.</br>
</div>

I think I want the caption to appear like this, but I’m not sure how to intergrade this with the existing CSS

img{display:block;}
.imgwrap {
	float:right;
	width:30%;
	position:relative;
	margin:0 2% 20px 0;
	overflow:hidden;
}
.imgwrap img {
	width:100%;
	height:auto
}
.rollover {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
	color:#fff;
	transform:translateX(-100%);
	transition:all .5s ease;
}
.roll-inner{
	display:table;
	width:100%;
	height:100%;
}
.roll-content{
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
.roll-content h3,.roll-content p{width:70%;margin:auto;}
.imgwrap:hover .rollover{transform:translateX(0)}
<div class="imgwrap"> <img src="https://www.terpconnect.umd.edu/~ankeyes/SGC/SGC_Service_Day.png" alt= "holiday" width="250">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>On August 26, 2016,</h3>
        <p>we participated in Service Day and helped clean up Kenilworth Park & Aquatic Gardens in DC.</p>
      </div>
    </div>
  </div>
</div>

I’m not sure exactly what you want, but the caption can be made to be on top by applying position relative then giving it a z-index. This was adapted from the first mark up you posted:-

For a start, the existing styling should be in the head section, not in the middle of the body.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.