Extend description panel on Image Effect CK

I have given your the code ...this is not what I have written

I've added the code you've supplied to the css but it hasn't worked?

Check the "USERS" panel at

uk604.directrouter.com/~wwqinzls/index.php/construction

I've extended the list to include more items but they remain hidden

figure.effectck-sarahPink img, figure.effectck-sarahBlue img {
max-width: none !important;
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
min-height: 220px;
object-fit: cover;
}

you must adapt the min-height value to your need, of course if you add then more text, you will get the same ...
may be that you must not put so much text
This is not an article, just a visual effect to attract the visitor and give a short info.

I've managed to achieve this effect -
uk604.directrouter.com/~wwqinzls/index.php/construction

using

figure.imageeffectck .figure.imageeffectck_img {
position:relative;
overflow:hidden;
height:220px;
{

figure.imageeffectck:hover .figure.imageeffectck_img {
height:600px;
-webkit-transition: height 4s;
transition: height 4s;
{

but it needs a height specified on the div. Can you think of a way that the height would auto set?

great
there is no auto height as the text is positioned in absolute ...