Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
yoo howdy! just wondering if there's a way to make an image zoom in / magnified once you hover over it and it's at an angular position? (wording is difficult lol)
i've tried to look online but most of the stuff being said doesn't really make sense to me so decided to ask here for help ;;"
Forum Icon: garbocan_
Code
.contain
{
overflow: hidden;
height: 150px;
width: 150px;
}
.contain > img
{
width: 100%;
transition: 0.5s transform ease-in-out;
}
.contain:hover > img
{
transform: rotate(30deg) scale(1.5);
}
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
by Kaede
Ah, thanks for the explanation!
I tried messing around with the code to see if I can get it to where I wanted it to be but I think there needs to be another part to it?
Super scuffed and low effort example but it's hard to put it in words lol
This is what I was trying to get:
Ooh so you want it to be bigger without cutting off?
Basically, create a [sc=contain] (or rename if you'd like), put your image within the styleclass, and use this CSS. You can change the numbers as necessary, for width/height, scaling, etc., until you get the exact effect you desire.
Image used made by xaandiir for my use only (pulled my avatar for ease XD)
10/10 quoted original post and edited it XD
Code
.contain
{
display: block;
min-height: 150px;
min-width: 150px;
margin-left: 50%-20px;
}
.contain > img
{
width: 150px;
transition: 0.5s transform ease-in-out;
}
.contain:hover > img
{
transform: rotate(15deg) scale(1.5);
}
yup, that works! thanks for helping :D
Is there any way to do an automatic progress bar that adds the progress for you without you having to constantly update it?
Icon made by me
I have Commission slots open
check my site for further information
https://nexwr37.carrd.co
Score: 0
Varies on what you want to track. Can you be more specific?
I was working on trying to edit a mature box inside a display box and I am not sure what I need to be able to have different colors and such for the mature box than what I have set up for the display box. May I have some guidance?
It would be wonderful if any new panels of any kind were default so properties don't carry over.
This hidebox may look wonky
nobbcode
[display=WARNING! - OFFSITE LINKS]
[css=font-size: 10.5pt;]The links are under (18+) Mature code due to rare Mature content/language.
If you don't see anything below this, that is why![/css]
[sc=mature][mature]links[/mature][/sc][/display]
[style]
.mature{
&>h3 {
text-align: center;
background: #1da1f2;
a {
display: block;
margin: -4px;
padding: 4px;
color: white;
text-decoration: underline;
text-shadow: none;
}
}
&>div {
color: #fff;
font-weight: 500;
}
}
.panel{
background:#0e0e10;
border: none;
box-shadow:0px0px8px#000;
&>h3{
color:#fff;
background:#18181b;
text-align:center;
height: 22px;
border-bottom: 0px solid #fff;
font-weight: bold;
font-size: 12.5pt;
-webkit-text-stroke: 0pt #9146ff;
text-shadow:
-2pt -1.75pt 0 #9146ff,
2pt -1.75pt 0 #9146ff,
-1pt -1.75pt 0 #9146ff,
1pt -1.75pt 0 #9146ff,
-1.45pt 0.25pt 0 #9146ff,
1.45pt 0.25pt 0 #9146ff,
-1.25pt 1.1pt 0 #9146ff,
1.25pt 1.1pt 0 #9146ff,
-1.5pt 1.8pt 0 #9146ff,
1.5pt 1.8pt 0 #9146ff,
-1pt 2.5pt 0 #9146ff,
1pt 2.5pt 0 #9146ff,
-1.5pt 3pt 0 #9146ff,
1.5pt 3pt 0 #9146ff;
}
&>div{
color:#fff
}
}
[/style]
WARNING! - OFFSITE LINKS
The links are under (18+) Mature code due to rare Mature content/language.
If you don't see anything below this, that is why!
[mature]links[/mature]
On The Next Stream...
Time & Place: ? on Twitch
(Live Countdown)
Game(s): [On a semi-hiatus.]
My channel link is in my profile under (+18) Mature Code.
Thank you for the support!
Credits
in
Profile
Wishlist
So, if you want to have nested .panels, you'll need to set up some way to distinguish them. There's a couple ways you may approach this, but I think this might be the best?
Basically I'm wrapping the customized panel inside a class tag, and using the > CSS specifier to make sure the code only affects the direct child of that class, rather than everything in the post and/or all .panel children of the top level panel. If that makes sense.
This is a customized display panel
This is some text and a link inside the display panel.
Hide box unaffected by code
Contents of hide box, with another link.
Code
[sc=custom-panel][display=This is a customized display panel]
This is some text and [url=https://pokefarm.com/]a link[/url] inside the display panel.
[hide=Hide box unaffected by code]Contents of hide box, with [url=https://pokefarm.com/]another link[/url].[/hide]
[/display][/sc]
[style]
.custom-panel > .panel {
background-color: white; /* main BG color */
box-shadow: none; /* remove box shadow on some skins */
>div {
color: green; /* main text color */
>a {
color: blue; /* main link color */
}
}
>h3 {
background-color: black; /*header bg color*/
&,>a {
color: pink; /* header text color */
}
}
&,>h3 {
border-color: green; /* border color */
}
}
[/style]
Thank you so very much! I'll get to work fixing up my code in a bit. If I were to edit that hide box (or mature code in my case) with separate colors and such, do I duplicate the code and change the class name so I have something like 'custom panel' and 'mature panel'?
Cannot post: Please log in to post