Remove Image Animation - Gallery

Hello,

Is there an easy way to remove the image animation on the images in the gallery? I like the layout of that page, but I just want to link the image to an internal page instead.

Thank you,
John

Solved!

For those looking for the same. You need to replace the gk-photo class and associated CSS with your own, I used cat-image for this example. I added the below CSS to my override.css file -- Make sure you have CSS Override enabled in the Template > Advanced Settings.

Code: Select all

.cat-image {
clear: both;
padding: 35px 0;
}

.cat-image img {
float: left;
max-width: 100%;
}

.cat-image > a {
display: block;
float: left;
max-width: 45%;
}

.cat-image p {
font-size: 16px;
margin: 0;
text-align: left;
}

.cat-image h3 {
font-size: 24px;
padding: 30px 0;
text-align: left;
}

.cat-image figcaption {
  float: right;
  width: 45%;
}

.cat-image:after {
clear: both;
content: "";
display: table;
}


Here is what the original HTML looks like form the Steakhouse demo:

Code: Select all

<figure class="gk-photo gk-photo-left">
<a href="/joomla25/steakhouse/images/demo/gallery1.jpg"><img src="/joomla25/steakhouse/images/demo/gallery_thumb1.jpg" alt="Gallery Thumb I"></a>
<figcaption>
<h3>Risus Ullamcorper Mollis</h3>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
</figcaption>
</figure>


Here's the HTML after you add the custom CSS:

Code: Select all

<figure class="cat-image gk-photo-left">
<a href="/joomla25/steakhouse/images/demo/gallery1.jpg"><img src="/joomla25/steakhouse/images/demo/gallery_thumb1.jpg" alt="Gallery Thumb I"></a>
<figcaption>
<h3>Risus Ullamcorper Mollis</h3>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
</figcaption>
</figure>


The only class that needs to be replaced is the gk-photo, the gk-photo-left and gk-photo-right can be left alone.

Actually, there was an issue with the gk-photo-right class. I had to replace that with cat-image-right and add the following CSS to the override.css for images I wanted to float on the right. Go figure

Code: Select all

.cat-image-right figcaption {
  float: left;
}

.cat-image-right > a {
  display: block;
  float: right;
  max-width: 45%;
}



Hi

Ok. Thank you for sharing the solution with us. Thread closed.