hi I want show some detail to my user when user hovering the IMG tag. for this purpose I use the iHover CSS and only change the overflow to auto. Because in some of my image the data I want show is overflowing from image and need scrollbar to show everything.but I do not want the scrollbar I want if the info is overflowing is show on the image, even if show beyond the img tag Borders and the min-width and min height should be 300px.for example in the first Picture you can see the scrollbar:
but I need something like this if it has overflow. the data is random:
this is my css code:
.ih-item { position: absolute; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out;}.ih-item,.ih-item * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.ih-item a { color: #333;}.ih-item a:hover { text-decoration: none;}.ih-item img { --widthValue: var(--width); --heightValue: var(--height); width: var(--widthValue); height: var(--heightValue);} .ih-item.square { --topValue: var(--top); --leftValue: var(--left); --widthValue: var(--width); --heightValue: var(--height); --colorValue: var(--color); position: absolute; top: var(--topValue); left: var(--leftValue); width: var(--widthValue); height: var(--heightValue); /* border: 2px solid black*/ border-width: 2px; border-style: solid; border-color: var(--colorValue); border-radius: 10px; cursor: pointer; } .ih-item.square .info { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: auto; }.ih-item.square.effect13 { overflow: hidden;}.ih-item.square.effect13.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.8);}.ih-item.square.effect13.colored .info h3 { background: rgba(12, 34, 52, 0.5);}.ih-item.square.effect13 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);}.ih-item.square.effect13 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out;} .ih-item.square.effect13 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 20px; background: #111111; margin: 10px 0 10px 0; padding: 5px 0 5px 0; } .ih-item.square.effect13 .info p { font-size: 20px; position: relative; width:100%; color: whitesmoke; padding: 0px 0px 5px 0px; margin: 5px 0px 5px 0px; text-align: center; }.ih-item.square.effect13:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);}.ih-item.square.effect13:hover .info { visibility: visible; opacity: 1;}.ih-item.square.effect13.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%);}.ih-item.square.effect13.top_to_bottom:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}and this is my html:
<div class="ih-item square colored effect13 top_to_bottom aos-init" style="--top: calc(@startY * 1px) ; --left:calc(@startX * 1px) ; --width: calc(@width * 1px) ; --height: calc(@height * 1px) ; --color: @color ;" data-aos="@randomAnimaation"><div class="img"><img src="~/assets/adsimage/@image"></div><div class="info "><!-- my info date is here--></div></div>how can fix this?
