I need to center this div that is wrapped inside another div:
Div to be centered:
.post-username {
padding: 10px;
background: #000;
border-radius: 4px;
position: absolute;
top: 0;
}
It should be centered inside of this:
.post {
background: #3e4758;
overflow: hidden;
border-radius: 4px;
width: 270px;
height: 330px;
position: relative;
}
.post-username {
padding: 50px;
background: #000;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.post {
background: #3e4758;
overflow: hidden;
border-radius: 4px;
width: 270px;
height: 330px;
position: relative;
}
.post-username {
padding: 10px;
background: #000;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.post {
background: #3e4758;
overflow: hidden;
border-radius: 4px;
width: 270px;
height: 330px;
position: relative;
}
<div class="post">
<div class="post-username">asdasd</div>
</div>
Related
I'm pretty new to CSS, I wanted to know if it's possible to have some content (an image) on a button on hover. I'll attach an image on how I want it to be. Thank you in advance.
Here's a way to do it:
.btncontain {
position: relative;
width: 200px;
height: 100px;
}
.button {
border: 3px solid aqua;
border-radius: 10%;
width: 100px;
margin: 20px;
padding: 10px;
}
.button:hover{
background-color: aqua;
color: white;
}
.button:before {
content: "Normal";
}
.button:hover:before {
content: "On Hover";
}
.btncenter {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubble {
width: 30px;
display: none;
z-index: -1;
}
.button:hover .bubble{
display: block;
}
.bubbletop{
position: absolute;
top: 25%;
left: 85%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubblebottom{
position: absolute;
top: 75%;
left: 15%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="btncontain">
<div class="btncenter">
<button class="button"> <img class="bubble bubbletop"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024">
<img class="bubble bubblebottom"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024"></button>
</div>
</div>
I'm trying to place Text and button on an image like this. Can someone help with this.
this is what I have tried. The thing is it does render properly in outlook email
CSS:
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #55A646;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: #55A646 ;
}
HTML:
<div class="container">
<img src="http://image.com" alt="" style="width:100%">
<button class="btn">Button</button>
</div>
Folow The link: https://www.w3schools.com/howto/howto_css_image_text.asp
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom center text */
.bottom-center {
position: absolute;
bottom: 8px;
left: 45%;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-760x400.png" alt="Snow" style="width:100%;">
<div class="bottom-center">
<button>Bottom Center</button>
</div>
<div class="centered">Centered</div>
</div>
try this instead,
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: 100%
}
.container .btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #55A646;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: #00cc00 ;
}
h4{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
background:#111;
padding: 7px;
}
<div class="container">
<img src="https://i.stack.imgur.com/bf3jO.png" alt="" style="width:100%">
<h4>The table Fan</h4>
<button class="btn">Fan</button>
</div>
I've making an image and a slide and everything seems to work the way I want it, but the left side reacts when I haven't even reached the image. I've played with if for a while but as it is I can't figure out why.
not to mention I can't find the words but I haven't worked on that part much.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
you have defined the hover for the container and your image has left a margin. Either remover the margin or define hover for the image because of
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Or you can define another container and put it inside the main one and do the same thing.
I need help making my icons around the main wheel be more responsive to the page size increasing and decreasing. Right now they move around and I need them to stay put relevant to the middle wheel. I also would like the wheel and icons to resize better when the page shrinks or grows. I feel like it has something to do with my positioning but I am not sure. Been stuck for hours. Anything helps!
My website is www.marshalllanning.com and I will put my CSS code below...
.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
.navbar-custom {
background-color: black;
z-index: 3;
}
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: 0;
}
.navbar-toggle {
z-index:3;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: red;
}
.navbar-custom .navbar-toggle {
background-color: white;
}
#media screen and (max-width: 1024px) { /* Specific to
this particular image */
.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
.img1 {
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 500px;
border-color: white;
border-width: 15px;
border-style: solid;
position: absolute;
margin: 0;
top: 52%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.fb {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 30%;
left: 34%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
.fb:hover {
opacity: 0.7;
}
.sc {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
margin: 0;
top: 16.8%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
.sc:hover {
opacity: 0.7;
}
.gh {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 30%;
left: 66%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
background-color: white;
border-color: black;
border-width: 1px;
border-style: solid;
}
.gh:hover {
opacity: 0.7;
}
.ig {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 83%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
.ig:hover {
opacity: 0.7;
}
.li {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 50%;
left: 30%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
.li:hover {
opacity: 0.7;
}
.xb {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 50%;
left: 70%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
.xb:hover {
opacity: 0.7;
}
.az {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 70%;
left: 66%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
.az:hover {
opacity: 0.7;
}
.gc {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 70%;
left: 34%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
.gc:hover {
opacity: 0.7;
}
.center {
color: whitesmoke;
height: 10em;
position: absolute;
margin: 0;
top: 30%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Create a div around all items like <div style="width: 500px;height: 500px;position: relative;margin: auto;"> and then change in css the top and the left values.
I have sets of skewed divs that I would like a separate image in each. Is this possible? If I try to place an image inside, the image is also skewed and looks distorted. How can I fix this? Essentially I would like an image in the black colored spaced. Please and thank you for all your help in advance!!!
.wrap {
position: relative;
width: 95vw;
height: 20vw;
margin-right: auto;
margin-left: auto;
background: white;
overflow: hidden;
}
.button-skewed .button {
width: 98%;
height: 100%;
background: black;
display: inline-block;
text-align: center;
box-shadow: inset 0 0 0 1vw #008080, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button:hover ~ span {
background: #007a7a !important;
}
.button-skewed .button:hover ~ span:before {
background: #007a7a !important;
}
.button-skewed .button:hover {
background: #007a7a;
box-shadow: inset 0 0 0 1vw #007a7a, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button.left {
margin-left: -1.7vw;
position: absolute;
left: 0%;
transform: skewX(-20deg) translate(-50%, -50%);
top: 50%;
}
.button-skewed .button.right {
margin-right: 1.7vw;
width: 200%;
position: absolute;
transform: skewX(-20deg) translate(100%, -50%);
top: 50%;
right: 50%;
}
.button-skewed .button .titleleft {
position: absolute;
top: 50%;
left: 71%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed .button .titleright {
position: absolute;
top: 50%;
left: 12%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed img {
position: relative;
background-size: cover;
}
.mask-outer-left {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-left:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
}
.mask-outer-right {
position: absolute;
right: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-right:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>
<br>
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>
You may simply add a second css class which skews in the opposite direction. Perhaps someone has a more elegant solution:
.button-skewed .button img {
transform: skewX(20deg)
}
.wrap {
position: relative;
width: 95vw;
height: 20vw;
margin-right: auto;
margin-left: auto;
background: white;
overflow: hidden;
}
.button-skewed .button {
width: 98%;
height: 100%;
background: black;
display: inline-block;
text-align: center;
box-shadow: inset 0 0 0 1vw #008080, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button:hover ~ span {
background: #007a7a !important;
}
.button-skewed .button:hover ~ span:before {
background: #007a7a !important;
}
.button-skewed .button:hover {
background: #007a7a;
box-shadow: inset 0 0 0 1vw #007a7a, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button.left {
margin-left: -1.7vw;
position: absolute;
left: 0%;
transform: skewX(-20deg) translate(-50%, -50%);
top: 50%;
}
.button-skewed .button.right {
margin-right: 1.7vw;
width: 200%;
position: absolute;
transform: skewX(-20deg) translate(100%, -50%);
top: 50%;
right: 50%;
}
.button-skewed .button .titleleft {
position: absolute;
top: 50%;
left: 71%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed .button .titleright {
position: absolute;
top: 50%;
left: 12%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed img {
position: relative;
background-size: cover;
}
.mask-outer-left {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-left:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
}
.mask-outer-right {
position: absolute;
right: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-right:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button-skewed .button img {
transform: skewX(20deg)
}
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><img src="https://fxfactory.com/downloads/docs/noiseindustries/fxfactorypro/Thumbnails/Stripes.jpg"/><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>
<br>
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>