Kuta's profile picture

Published by

published
updated

Category: Web, HTML, Tech

My First Blog Post! / Hover Zoom

I'm extremely late to the SpaceHey Party here. Still, I decided to go ahead and make a blog about how things are coming along. Talking about my first impressions with SpaceHey. I'll also be discussing a hover zoom concept I thought was kind of cool and a couple of others seemed to really like as well. Hence this blog being in the "Web, HTML, Tech" category.

I've been taking my time since I signed up for my account to get my page set up just trying to figure out things as I go along with it. It's far from finished but it's slowly getting somewhere. I had came across another user who had tiny icons of things they were interested in on their profile with the text displayed as you hover of it using a title in their image links. I thought I'd take a simple yet really cool idea and expand on it. I imagine there's others on here who have probably come up with the same idea and are using this. If not or you may be interested as well. I'll post here on how to exactly do it.


It's quite simple really. Just throw this into your profile code.

Obviously other changes can be made according to how you may want it compared to how I have things set up here. Super easy!


Don't forget your tags!

Remove the "-" from the tags for this to work.



<-style->

.zoom-container {

display: inline-block;

overflow: hidden; /* Clips content that overflows during zoom */

transition: transform 0.3s ease; /* Smooth animation */

}

.zoom-container:hover {

transform: scale(1.5); /* Zooms in to 150% */

transform-origin: center; /* Zooms from center */

}

<-/style->

Then next you'll just add this with your image.


<-div class="zoom-container"-><-img src="Image Link Goes Here" height="custom size here" width="custom size here" title="What Text Shows As You Hover Over Your Image"/-><-/div->

Don't forget your tags!

Remove the "-" from the tags for this to work.



When done correctly should give you this effect as shown here.

(Customize your size according to your own personal preferences)






-Hope you enjoy!

Other than that my first impressions of SpaceHey is that I enjoy the customization. Always nice to personalize something instead of getting thrown into a corporate pile of shit that you can't really do anything with unless you set something up with stylus or customize yourself within the browser. I'm not an expert by any means with HTML/CSS. I do hope to learn more and get better with it. Another thing it's a bit slower than I expected. However, due to the way that the notifications are set up and how the forums are managed. It's not really surprising to say the least. I think some work could easily be done on that end. I picked up fairly quickly on that the blogs section is booming compared to the forums or even the groups. I guess I'll be focusing on some blog posts every so often. Either way, it could be a lot worse. A lot of websites that I frequent are fairly much slower paced than what most people here would be accustomed to.

I haven't really noticed any problems with other users despite seeing plenty of claims among other posts. Maybe I just haven't been around long enough? Hmm? I don't know.

I feel like this blog should be a lot longer but I'm not really sure what else to add at the moment. I guess I'll just end things here. Feel free to add me if you like. I hope some of you find the blog at the very least interesting and are able to get something out of it.

Bye for now.



-Kuta


2 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

Fawn

Fawn's profile picture

Thank you so much for this blog the code works perfectly!!


Report Comment



You're very welcome! \(^▽^)/

by Kuta; ; Report