Alright so I was trying transitions and I wondered if it was possible with only css to resize a box (div) and it's content at the same time so everything would grow instead of only the box growing.
Thanks in advance!
Okay actually solved this myself, it's as easy as using transform: scale(X.x);
Related
I’ve got a quick question that’s been puzzling me for a couple of hours today. On a site I am working on for a client-he wants a complex shape but with text over it. What I’ve done in the past is use a position absolute svg with custom styling and then the text is fine as is. But the problem I am facing is the box containing the text is not as large as the svg shape so flex box is not respecting it and thus bringing the whole site up going over the svg image. I can’t think of any solutions and could use a little bit of help!
Oh and this is done in react if that makes it easier or harder.
Thanks y’all!
If you want to have text over an image, you can try to set the image as a background of your container. From there you can change the size and position of your background. Add it on your css file
.customContainer {
background: <background-image>
}
Okay! Check this and try this [https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_background-image][1]
RE:http://www.jorgemonedero.com/blog/index.php/portfolio/tamara-rojo-2/
I wish to move the close button (top right below social media icons) to the bottom line alongside photo title/publication and photo count. When I changed the css the button disappears behind a layer?
Someone mentioned I could do this with javascript?
Can anyone help?
Brians answer is pretty much the easiest way to go, or you could give your container #grid-gallery-wrapper a height and then it wouldn't cut off the close buttons when positioned.
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
So, I have a popup information "window" on my site. Basically, I've created a light-box type widow for online help and other informative things. It's been working great. My closing button is a little bubble that sticks outside the top-left corner and blends perfectly with the ridged border of the popup window.
Then I discovered a problem. If there was too much info, it would just print outside of the box. No big deal, I just added overflow:auto to the css. No more printing outside the box. However, my little "bubble" for closing the window also gets clipped.
I don't want to put this window closing icon inside the window- I really think my design is unique and cool. Does anyone know of a way to use overflow on an element, but still keep at least one element going outside?
Thanks, Dave
Absolute positioning: http://jsfiddle.net/EkPmD/1/
Put your text in a container and set overflow on that.
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/