I want to horizontally center a -10 degree rotated div in a smaller parent.
I want this so that the middle point of the rotated div is in the center of the parent block. (I marked the middle point with some test text. But this is just to mark it).
How to go about this?
https://jsfiddle.net/ytL9ybww/3/
body {
padding:0 0 0 0;
margin: 0 0 0 0;
padding-left:300px;
overflow:hidden;
}
nav {
height:100vh;
width:300px;
position:fixed;
top:0;
left:0;
background-color:black;
}
.block {
width:100%;
position:relative;
overflow:hidden;
}
.rotated-block {
position:relative;
z-index:10;
top:300px;
left:0;
text-align:center;
width: 5000px;
height:900px;
background-color:green;
transform:rotate(-10deg);
}
<div class="block">
<nav>
</nav>
<div class="rotated-block">
test
</div>
</div>
First center the block (absolute positioning and a transform) then rotate it.
.parent {
height: 80vh;
width: 80vw;
margin: 1em auto;
position: relative;
border: 1px solid grey;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
background: red;
width: 110%;
height: 50px;
}
.center {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: green;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
<div class="center"></div>
</div>
Related
In my navigation bar there is a logo which should be centered, and a menu button image (3 lines) which should be floated left. I've gotten the menu button to float left but just cannot seem to get the logo to be in the exact center of navbar, it's always a bit to the right.
I've tried puttin them both in divs and setting div width to 50%, then float the image left so it makes it centered but no luck.
HTML:
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
</div>
</div>
CSS:
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo{
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
}
Added: left: 0; right: 0; margin: auto; to #resp-logo
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo {
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
left: 0;
right: 0;
margin: auto;
}
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="https://placehold.it/20x20">
<img id="resp-logo" src="https://placehold.it/500x100">
</div>
</div>
Try setting the menu icon as position: absolute; and normalize the rest
Use the following which may help
<div id="resp-navvar>
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
#resp-logo {
positions:absolute;
left:50%;
Transform:translate(-50%);
Width- custom, height- custom
}
Don’t forget to put the root div position to relative if things don’t work
Remove these from #resp-logo
position: absolute; display: inline;
Or You can force it to center using margins.
I want a to create a transparent dark image overlay above image with text. with a nice transition on hover.
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
the design I wanted is this:
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position:relative;
z-index:1;
}
.study1:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:-1;
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
.transparent-dark {
background: rgba(0, 0, 0, 0.5);
height:100%;
}
<div class="study1">
<div class="transparent-dark">
<a class="title" href="#">View Case Study</a>
</div>
</div>
See below. Using the :after pseudo code the background is set with opacity 0. On hover, the opacity is changing to 0.3 with a duration of 1 second.
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position: relative;
}
.study1:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
transition: background 1s ease;
}
.study1:hover:after {
background: rgba(0, 0, 0, 0.3);
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
Set the transparent dark image overlay using the class .wrapper mentioned in the js fiddle, set the position: relative to .study1 and position other elements accordingly.
Here is the js fiddle.
This may serve your purpose
.image {
position:relative;
width:200px;
height:200px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
<div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
for more details please go here https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css
Use this code
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position:relative;
z-index:1;
}
.study1:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:-1;
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transition:0.5s;
transition:0.5s
}
.study1:hover:after{
-webkit-transform:scale(1);
transform:scale(1);
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position: relative;
}
.action {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.4);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.study1:hover .action {
height: 100%;
}
.title {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="study1">
<div class="action">
<a class="title" href="#">View Case Study</a>
</div>
</div>
I think it may suites your requirement. A neat transition.
.container {
display: flex;
position: relative;
border: 1px solid: #ddd;
width: 300px;
height: 300px;
}
.overlay {
position: absolute;
left: 0;
padding: 20px;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(127, 127, 127, 0.6);
transition: all 0.3s ease;
}
.content {
width: 300px;
height: 300px;
background-image: url('http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.text {
font-size: 25px;
text-transform: uppercase;
color: #fff;
display: inline-flex;
justify-content: center;
text-align: center;
transition: all 0.8s ease;
}
.overlay:hover .text {
transform: scale(1.2, 1.2);
}
<div class="container">
<div class="overlay">
<span class="text">The World's finest developers</span>
</div>
<div class="content">
</div>
</div>
Here is a snippet according to your requirement.
Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.
I am in need of assistance creating something like the image above either in CSS / jQuery / SVG / Canvas
Each triangle will contain an image that needs to be cropped to fit the triangle and everything needs to be responsive.
I managed in doing this via CSS border but for my surprise I couldn't add an image to it.
Any kind of tips or info is greatly appreciated.
Example resulted via CSS:
<div class="middle_section" style="height: 900px;">
<div class="one_forth triangleMask for_1"></div>
<div class="one_forth triangleMask for_2"></div>
<div class="one_forth triangleMask for_3"></div>
<div class="one_forth triangleMask for_4"></div>
</div>
.middle_section .for_3,
.middle_section .for_1{
width: 100%;
height: 50%;
overflow: hidden;
}
.middle_section .for_2,
.middle_section .for_4{
width: 50%;
height: 100%;
overflow: hidden;
}
.middle_section .for_1:after {
width: 0;
height: 0;
border-style: solid;
border-width: 440px 808px 0px 808px;
border-color: #ff0000 transparent transparent transparent;
content: '';
position: absolute;
top:0;
left:10px;
}
.middle_section .for_2:after {
width: 0;
height: 0;
border-top: 440px solid transparent;
border-bottom: 440px solid transparent;
border-left: 808px solid lime;
content: '';
position: absolute;
top:10px;
}
.middle_section .for_3:after {
width: 0;
height: 0;
border-left: 808px solid transparent;
border-right: 808px solid transparent;
border-bottom: 440px solid #4679BD;
content: '';
position: absolute;
bottom:0;
left:10px;
}
.middle_section .for_4:after {
width: 0;
height: 0;
border-top: 440px solid transparent;
border-bottom: 440px solid transparent;
border-right: 808px solid pink;
content: '';
position: absolute;
top:10px;
right:0;
}
I made an example with CSS transform rotate:
.wrapper {
width:284px;
height:281px;
overflow: hidden;
position: relative;
}
.top {
transform: rotate(45deg);
position: absolute;
top:-100px;
left: 40px;
}
.bottom {
transform: rotate(45deg);
position: absolute;
bottom: -105px;
left: 40px;
}
.left {
transform: rotate(45deg);
position: absolute;
left: -102px;
top: 41px;
}
.right {
transform: rotate(45deg);
position: absolute;
right: -98px;
top: 41px;
}
<div class="wrapper">
<div class="top">
<img src="http://lorempixel.com/200/200/sports/1"/>
</div>
<div class="bottom">
<img src="http://lorempixel.com/200/200/sports/2"/>
</div>
<div class="left">
<img src="http://lorempixel.com/200/200/sports/3"/>
</div>
<div class="right">
<img src="http://lorempixel.com/200/200/sports/5"/>
</div>
</div>
I have a problem with centering div in HTML (vertical & horizontal). My code looks something like this:
<div id="container">SOME HTML</div>
#container{
width: 366px;
height: 274px;
margin: 50%;
top: -137px;
left: -188px;
position:absolute;
}
Only chrome center this div in to the middle of the screen.
This will center the <div> horizontally:
#container{
width: 366px;
height: 274px;
margin: 0 auto;
}
Centering vertically is not quite simple, you maybe have to use javascript for that, or you try this css solution.
#container{
width: 366px;
height: 274px;
top: 50%;
left: 50%;
margin: -137px 0 0 -188px;
position:absolute;
}
This does the trick (vertical & horizontal):
#container{
position: absolute;
width: 366px;
height: 274px;
left: 50%;
top: 50%;
margin-left: -183px; /* half width */
margin-top: -137px; /* half height */
}
You could use:
#container {
// Your other values, but remove position: absolute;
margin: 0 auto;
}
Alternatively, you can do:
#wrapper, #container {
border: 1px solid red;
height: 500px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: yellow;
left: 50%;
padding: 10px;
position: relative;
top: 50%;
}
And you're HTML code:
<div id="wrapper">
<div id="container">
<h1>Centered Div</h1>
<p>
This div has been centered within your browser window.</p>
</div>
</div>
That will center the <div> in the middle of the browser window.
Try this one:
<div class="cont">
<div class="box"></div>
</div>
Css:
.cont{
background-color: tomato;
width: 600px;
height: 400px;
position: relative;
}
.box {
width:100px;
height:100px;
background-color: teal;
color:#fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
Should be fine to use just CSS:
here is the demo
#container{
width: 366px;
height: 274px;
margin: 50%;
top: 50%;
left: 50%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}