Pure CSS - Read More/Read Less Images

In my search for a neat, nice and working 'Read more / Read Less'-function I managed to find below code. This code works fine and can be used several times on the same page (what I

Solution 1:

Should be able to use the same idea for the height of all images inside the .read-more-target.

Something like this:

.read-more-target img {
  height: 0;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target img {
  height: auto;
}

Here is an edit to your fiddle that does this: https://jsfiddle.net/xrtxqu94/20/

Solution 2:

event if the container of the images are set to opacity:0 , the images will still occupy space in the document flow.

here is a solution, you can add the following rules :

.read-more-state ~ .read-more-wrap img {
     display: none;
}

 .read-more-state:checked ~ .read-more-wrap img {
     display: block;
}

this will ensure that the image takes no space when the read-more state is closed

https://jsfiddle.net/xrtxqu94/26/