I am creating a web app that uses CSS' transform scale property. As shown by the image below, I have an object inside of a container, which fits nice and snugly inside, without any overflowing content. This is how I wish for it to be.
My issue is brought up when I re-scale the object to a size greater than the container. As shown by the image, clearly the object is larger than the container. As marked by the arrows and labels of "scrollable area", the container can scroll to these areas, but the parts labelled with "hidden" are not visible or accessible through the scroll due to their overflow.
For a practical view of my issue, here's a link to a codepen with my code:
CodePen
Snippets of my CSS code area as follows:
#container {
position: fixed;
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin-left: 330px;
margin-top: 10px;
overflow: scroll;
display: block;
text-align: center;
}
#object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: rgba(255, 0, 255, 0.45);
margin-top: 40px;
border-radius: 25px;
transform: scale(3); /* This would be scale(1) on the small object */
}
This issue is holding back the development of my web app, so thanks in advance for your time and contributions.
My best guess would be that this is happening because of transform origin. Try setting it to 0 0 should fix Your issue:
#object2 {
position: relative;
width: 120px;
height: 120px;
display: block;
background-color: rgba(255, 0, 255, 0.45);
border-radius: 25px;
transform: scale(3);
transform-origin: 0 0;
}
Demo codepen
Related
Here's my issue:
I have a mockup from a design company that wants a text block with a 'broken' square border behind some big text that looks like this (description: there is a small white frame behind large text that is broken up by the text, and then a smaller text link below):
Image of an element on client's website,
In the design, the text is displayed accross the white square frame. The way I have implemented it right now is to make the big text's background color gray. Because the current image's background is gray the desired effect is achieved.
What is needed is to achieve that effect (of breaking the white frame) REGARDLESS of the appearance of the image. Because right now, this happens:
the gray background of the text appears like a box in front of the image -- it ought to be transparent
To further illustrate, if I set the background-color of the big text to transparent, the whole frame is shown (the desired effect is a broken frame):
background: transparent #1
More info if it helps:
The white frame element is just a div with a white border.
I am not sure exactly what to search for in this case, if there is an appropriate CSS solution (preferrable) or if I need to use SVG or maybe a PNG? Thank you for any help.
As #Temani Afif pointed out in the comments, it's not one box, but two separate shapes in CSS.
I made an example to illustrate this using flexbox.
.page {
background-color: black;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box-top {
width: 100px;
height: 10px;
border-color: white;
border-width: 2px;
border-style: solid;
border-bottom: none;
}
.box-bottom {
width: 100px;
height: 30px;
border-color: white;
border-width: 2px;
border-style: solid;
border-top: none;
}
.separator {
color: white;
width: 100%;
margin: 5px 0;
padding: 0;
font-size: 40px;
text-align: center;
}
<div class="page">
<div class="box-top"></div>
<p class="separator">
Headline
</p>
<div class="box-bottom"></div>
</div>
You can make a square element with a border and use a mask on it:
body {
margin: 0;
min-height: 100vh;
background: black;
box-sizing: border-box;
padding-top: 1px;
}
h2.fancy {
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 40px, 100% 40px, 100% 100%, 0 100%);
}
<h2 class=fancy>I'm a fancy title...</h2>
The advantage of this solution is that you can make it scale easily with what might change on various screen sizes. For example, with the title's font-size:
document.querySelector('input.font-size').addEventListener('input', function(e) {
document.querySelector('h2').style.fontSize = e.target.value + 'px';
})
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/800) center /cover;
box-sizing: border-box;
padding-top: 1px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
h2.fancy {
z-index: 1;
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
display: block;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 calc(10px + 1.3em), 100% calc(10px + 1.3em), 100% 100%, 0 100%);
}
input[type=range] {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 1;
}
<h2 class=fancy>I'm a fancy title...</h2>
<div class=overlay></div>
<input type=range min=12 max=36 class=font-size>
The disadvantage is that it doesn't work in IE or Edge lower than 18 or in Opera mini. This particular example works in IE 18, though, as it only uses polygon().
zoomimg is set at width: 145px; height: 145px; but it's pushing the text thats suppose to be in the it's parent out of the parent.
Zoomimg ProjectKort divs are the ones to look at
.projectkort{
margin: 10px 0px 10px 0px;
width: 100vw;
height: 150px;
background-color: white;
border-radius: 0px;
}
.zoomimg {
margin: 5px;
width: 145px;
height: 145px;
transition: all .3s ease;
opacity: 1.0;
position: relative;
overflow: hidden;
}
It's live here -> tsuts.tskoli.is/2t/2809984199/skapalon
Add 'overflow:hidden' to your projectkort class ONLY for the smaller mobile breakpoint.
The content of the box are wider than the container - so they are overflowing. Once I added overflow:hidden to the parent projectkort class, the overflow on mobile went away.
I have this dot, filled or not (depending on putting inner-circle id), that i want to use on Slick Slider.
#outer-circle {
height: 100px;
width: 100px;
position: relative;
border-radius: 50%;
padding: 100px;
background: #fff;
border: 15px solid red;
color: red;
text-align: center;
font: 32px Arial, sans-serif;
}
#inner-circle {
position: absolute;
background: red;
border-radius: 50%;
height: 250px;
width: 250px;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
Here is JSFiddle:
https://jsfiddle.net/thirtydot/dQR9T/2637/
I want to put it in the slick slider classes + make it inside slider (not above/below it)
https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css
Anyone have idea how to do that to look like on the picture?
In slider that should be text (f.e. "Profesjonalizm") and that red svg thing on the left. Of course navbar isn't part of that slider.
Any help would be much appreciated!
set the navbar over the slider with position absolute, and float:left on the circles.
I'm trying to make the sidebar for my theme match the main content, in that there's a solid background with a transparent border. I can make them work individually, but when I try to do both it doesn't work right. Here's the snipet of code that's been causing the problem:
#sidebar {
width: 300px;
background-color: #A3A3CC;
/*border-style: solid; border-width: 15px; border-color: rgba(255, 255, 255, 0.4);*/
position: fixed;
left: 60px;
top: 90px;
height: 490px;
margin-left: 30px;
}
I am aware that the border code is noted out, and that's because the border code and the background color code work fine individually, but when I have both at the same time, I get this.
Does anyone know how I can fix this? I just want to have a semi-transparent background under a solid one to make a nice border effect.
You can use a box-shadow instead of a border.
JSfiddle Demo
CSS
#sidebar {
width: 300px;
background-color: #A3A3CC;
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4);
position: fixed;
left: 60px;
top: 90px;
height: 490px;
margin-left: 30px;
}
Since the border is rendered on top of the background of the div, they are stacking and not giving you what you want. You could wrap another div around it, and use that as your border:
JSFiddle
HTML
<div id="outer"><div id="sidebar"> </div></div>
CSS
#sidebar {
background-color: #A3A3CC;
width: 300px;
height: 490px;
}
#outer{
padding:15px;
background: rgba(255, 255, 255, 0.4);
position: fixed;
left: 60px;
top: 90px;
}
I have two problems with my portfolio section which is not as smooth as I want it to be. Here they are:
I wanted my projects to change background-color and show a small plus sign when hovering over them. In the same time I wanted to add a "transition: all 0.5s ease-in-out;" but the result is not what I expected. It probbaly happens because my "plus sign" should be located in another div but I didn't know how to make it work. Instead I put it here:
.projectshot a .over:hover{
position: absolute;
background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
This is the effect I wanted to achieve: http://bjorsberg.se/
The second problem that bothers me is that, if you look really carefully, when you approach each of the projects with the mouse the mouse pointer starts to "dance" and it behaves crazy??? How can I fix that???
Here is my JSFiddle:
http://jsfiddle.net/8fCMA/2/
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
I am quite new to web design (4 months since I started learning) and I am clearly not good with positioning div's inside div inside another div... So, please feel free to correct my fiddle if you see any trouble I created. Thanks!
I would simplify the html structure if I were you, as it is not necessary.
e.g.: projectshot can look like this:
<div class="projectshot">
<a href="http://www.yahoo.com" target="_blank">
<img alt="Sushi" src="...">
</a>
</div>
and you can add the "cover" as :before pseudoelement.
Then - in css all you need to do is to add this to the "cover" element:
opacity: 0;
transition: opacity .2s;
and - on hover - change the opacity to 1:
opacity: 1;
here's the updated demo
(I've removed a lot of your html/css code just for demo purposes)
I've just made some small changes including:
Moving the hover to the .projectshot box.
Moving background-position and background-repeat to the non
hover definition.
Adding the transitions.
It works for now but you can still remove a lot of code. Even the html can be heavily reduced.
I suggest you to have a look at that too (DEMO).
.projectshot{
position: relative;
padding: 10px;
height: 150px;
margin-bottom: 30px;
display: inline-block;
}
.projectshot img{
height: 150px;
width: 200px;
border-radius: 8px;
-webkit-box-shadow: 0 9px 13px rgba(0,0,0,.14);
-moz-box-shadow: 0 9px 13px rgba(0,0,0,.14);
box-shadow: 0 9px 13px rgba(0,0,0,.14);
}
.projectshot:hover .over{
background-image: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png);
background-color: rgba(51, 51, 51, 0.6);
transition: all 0.5s ease-in-out;
}
.projectshot:hover {
cursor: pointer;
}
.over{
position: absolute;
border-radius: 8px;
height: 150px;
width: 200px;
box-sizing:border-box;
-moz-box-sizing:border-box;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.5s ease-in-out;
}
.inner{
background: rgba(113,122,137,.85);
border-radius: 8px;
width: 100%;
height: 100%;
display: none;
}
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}