4 Replies - 222 Views - Last Post: 14 August 2019 - 03:22 PM

#1 bdk05089   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-August 19

CSS Image 'Hover' & 'Pop-Out' (or Another): <&

Posted 13 August 2019 - 07:05 PM

Hello All!

Newbie here to CSS and getting aggravated with myself and my code! I THINK this should be simple.

Here goes!

I have a page of thumbnail images that I would like to scale to full-size if not 'almost' full-size
within the page in which they're featured.

The images can typically be 1200px x 700px; and they range and change as they're vertical and horizontal
aligned.

I would like the 'end-user' or 'browser' of the site to 'mouse over' (ie. without 'clicking') any
one given image, and have it show THE ENTIRE image within that space. (Reason being is due to text
within the image I'd like the users to be able to 'read'; especially if my audience will tend 'older'
like me, with 'bad eyes.' :-( ).

I have tried using 'boxes,' and variables within 'styles' to no avail! There's just a small 'zoom-in' but
it's not the whole image on the page zoomed-in.

Any who, you can see what's going or (or not much) with INSPECT and VIEW SOURCE with this sample page:
https://bewell-ecard...ategory/be-well

I believe it's somewhere in the instantiation or inheritance or *somewhere* for the class type, thumbnail_image, but I'm not entirely sure...? ? ?

Any help would be more than greatly appreciated!

Here's the *snippet* where I THINK the problem lies:
.thumbnail_image{
	margin:7px 0;
	*padding:3px;
	-webkit-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px; */
}

.thumbnail_image:hover{
 -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
	-webkit-border-radius: 16px 16px 16px 16px;
	border-radius: 16px 16px 16px 16px;
	
}



I would like it to either pop-out within the frame object (if that's the correct term?) or do something
similar to as taught here, but can't seem to get for my images! :
https://www.w3school..._css_zoom_hover

Again, I don't want you to do my homework either, but I've been working on this for hours over two
days and still can't seem to grasp where I'm failing.

Thanks again for any/all help you can provide!

Best,

-Bea.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Image 'Hover' & 'Pop-Out' (or Another): <&

#2 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 56
  • Joined: 11-August 17

Re: CSS Image 'Hover' & 'Pop-Out' (or Another): <&

Posted 14 August 2019 - 02:39 AM

That overflow hidden is causing the cut off, i would suggest however to increase image quality but this mean downsizing a thumb and its a messy affair. I would look for a java script workaround with something like fancy box

.product-image-wrapper {
/* border: 1px solid #F7F7F5; */
/* overflow: hidden; */ <---------------change to visible ( and then also changez zoom amount. in css
margin-bottom: 30px;
}
Was This Post Helpful? 0
  • +
  • -

#3 bdk05089   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-August 19

Re: CSS Image 'Hover' & 'Pop-Out' (or Another): <&

Posted 14 August 2019 - 11:45 AM

Nesir, Hello!

I've done some changing as per your advice,
and the images are now getting to the right size,
but they 'drop' BEHIND all the other thumbnails -- with
the image not viewable.

<< Could you take one last look sir and see what you could diagnose
as I think I'm close? >>

I'd really like the *large* image to stay over the others until the
mouse moves in a semi-elegant way.... :)

Thanks for your insights sir! Greatly appreciated !

-- Bea.


View Postnesir28, on 14 August 2019 - 02:39 AM, said:

That overflow hidden is causing the cut off, i would suggest however to increase image quality but this mean downsizing a thumb and its a messy affair. I would look for a java script workaround with something like fancy box

.product-image-wrapper {
/* border: 1px solid #F7F7F5; */
/* overflow: hidden; */ <---------------change to visible ( and then also changez zoom amount. in css
margin-bottom: 30px;
}

Was This Post Helpful? 0
  • +
  • -

#4 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 56
  • Joined: 11-August 17

Re: CSS Image 'Hover' & 'Pop-Out' (or Another): <&

Posted 14 August 2019 - 01:40 PM

View Postbdk05089, on 14 August 2019 - 11:45 AM, said:

Nesir, Hello!

I've done some changing as per your advice,
and the images are now getting to the right size,
but they 'drop' BEHIND all the other thumbnails -- with
the image not viewable.

<< Could you take one last look sir and see what you could diagnose
as I think I'm close? >>

I'd really like the *large* image to stay over the others until the
mouse moves in a semi-elegant way.... :)/>

Thanks for your insights sir! Greatly appreciated !

-- Bea.


View Postnesir28, on 14 August 2019 - 02:39 AM, said:

That overflow hidden is causing the cut off, i would suggest however to increase image quality but this mean downsizing a thumb and its a messy affair. I would look for a java script workaround with something like fancy box

.product-image-wrapper {
/* border: 1px solid #F7F7F5; */
/* overflow: hidden; */ <---------------change to visible ( and then also changez zoom amount. in css
margin-bottom: 30px;
}


Hey man no problem so what you would add to your css is this :
.thumbnail_image{

padding:3px;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.thumbnail_image:hover{
-webkit-transform: scale(4,4);
-ms-transform: scale(4,4);
-o-transform: scale(4,4);
transform: scale(4,4);
z-index:99999;
display:block;
position:relative;


}

This is going to cause issues with ux and responsive design.

If you are really opposed to using a lighbox yould do something like this :

http://jsfiddle.net/93863/4/

instead of using the text as a link you would obviously use the image thumb and add all your transitions.
Was This Post Helpful? 0
  • +
  • -

#5 bdk05089   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-August 19

Re: CSS Image 'Hover' & 'Pop-Out' (or Another): <&

Posted 14 August 2019 - 03:22 PM

Nesir:

Thank you so much for working with me!

I guess yes, there are two problems:

The first is that the text within the image is not readable in many instances;
I don't understand why that is occurring.

Also, second, as I think you alluded, the page does get a tad 'messy' with the pop-out
that way.

I don't understand your 'second suggestion'? About a lightbox? The link on the web
was not clear to me so I don't get it... :(

Is there any way to better manage the size pop-out I have now so that it's readable?

This will be my last to you; I promise!

Thanks much again!

Best Regards,

-- Bea.


View Postnesir28, on 14 August 2019 - 01:40 PM, said:

View Postbdk05089, on 14 August 2019 - 11:45 AM, said:

Nesir, Hello!

I've done some changing as per your advice,
and the images are now getting to the right size,
but they 'drop' BEHIND all the other thumbnails -- with
the image not viewable.

<< Could you take one last look sir and see what you could diagnose
as I think I'm close? >>

I'd really like the *large* image to stay over the others until the
mouse moves in a semi-elegant way.... :)/>/>

Thanks for your insights sir! Greatly appreciated !

-- Bea.


View Postnesir28, on 14 August 2019 - 02:39 AM, said:

That overflow hidden is causing the cut off, i would suggest however to increase image quality but this mean downsizing a thumb and its a messy affair. I would look for a java script workaround with something like fancy box

.product-image-wrapper {
/* border: 1px solid #F7F7F5; */
/* overflow: hidden; */ <---------------change to visible ( and then also changez zoom amount. in css
margin-bottom: 30px;
}


Hey man no problem so what you would add to your css is this :
.thumbnail_image{

padding:3px;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.thumbnail_image:hover{
-webkit-transform: scale(4,4);
-ms-transform: scale(4,4);
-o-transform: scale(4,4);
transform: scale(4,4);
z-index:99999;
display:block;
position:relative;


}

This is going to cause issues with ux and responsive design.

If you are really opposed to using a lighbox yould do something like this :

http://jsfiddle.net/93863/4/

instead of using the text as a link you would obviously use the image thumb and add all your transitions.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1