In the following code, on hovering over the green button, the blue bar appears.
But when I write the words "About Me" on the about_button div (ie the green button), the shape of the button changes.
How can I successfully write "About Me" on the green button without spoiling the shape of the button?
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
add vertical-align:top to it, because inline-block by default has vertical-align:baseline
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align:top; /** THIS LINE */
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button">About Me</div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</body>
</html>
change position on #about_button from relative to absolute
You have the attribute display:inline-block on the button, this forces the shape wrap around the content inside it. Change it to display:block.
Related
I have a animated div that flies to the top right corner of the viewport.
However, because of the overflow properties it not visible outside of parent container in Firefox. It is perfectly visible in Chrome.
Element behind the scrollbar in Firefox:
Element correctly above the parent in Chrome:
How can I make it work in Firefox as well? If overflow-y: auto is removed from .container the issue doesn't appear anymore, but that's not a viable solution as I need the scrollable content.
Here is an example. You can check that it produces the desired behaviour in Chrome, but not in Firefox:
.app {
overflow: hidden;
}
.container {
width: 260px;
max-height: 400px;
background: blue;
left: 10px;
right: 10px;
top: 10px;
position: fixed;
z-index: 500;
overflow-y: auto;
}
.wrapper {
height: 250px;
padding: 10px;
margin: 5px;
background: yellow;
top: 5px;
position: sticky;
}
.content {
height: 600px;
margin: 5px;
background: orange;
}
#keyframes fly-to-top {
10% {
top: 150px;
right: 80%;
width: 50px;
}
30% {
top: 120px;
right: 70%;
width: 45px;
}
60% {
top: 75px;
right: 40%;
width: 40px;
}
100% {
top: 10px;
right: 160px;
width: 35px;
}
}
.animated {
position: fixed;
right: unset;
top: 165px;
width: 50px;
background: red;
color: white;
animation: fly-to-top linear 2s forwards;
display: flex;
align-items: flex-start;
}
<div class="app">
<div class="container">
<div class="wrapper">
<div class="animated">
Text
</div>
</div>
<div class="content">
Lorem ipsum
</div>
</div>
</div>
Try this splution:
.wrapper position set to fixed
.content is shifted down with transform: translateY()
In the .wrapper class, i was add pointer-events: none;, because
if cursor is on the .wrapper block without this property, mouse
wheel cann't scroll the content, scroll work only when drag the
scroll bar.
.app {
overflow: hidden;
}
.container {
width: 260px;
max-height: 400px;
background: blue;
left: 10px;
right: 10px;
top: 10px;
position: fixed;
z-index: 500;
overflow-y: auto;
}
.wrapper {
display: flex;
height: 250px;
padding: 10px;
margin: 5px;
background: yellow;
/* top: 5px; */
position: fixed; /* changed */
/* calculate '.container' width - scroll-track-width(12px-17px) - '.wrapper' padding(left, right) - margin(left, right) */
width: calc(260px - 12px - 20px - 10px);
z-index: 5;
pointer-events: none; /* mouse wheel work with this property */
}
.content {
height: 600px;
margin: 5px;
background: orange;
/* calculate '.wrapper' properties to shift '.content' down */
/* height + padding(top, bottom) + margin-bottom */
transform: translateY(calc(250px + 20px + 5px));
}
#keyframes fly-to-top {
10% {
top: 150px;
right: 80%;
width: 50px;
}
30% {
top: 120px;
right: 70%;
width: 45px;
}
60% {
top: 75px;
right: 40%;
width: 40px;
}
100% {
top: 10px;
right: 160px;
width: 35px;
}
}
.animated {
position: fixed;
right: unset;
top: 165px;
width: 50px;
background: red;
color: white;
animation: fly-to-top linear 2s forwards;
display: flex;
align-items: flex-start;
z-index: 100;
}
<div class="app">
<div class="container">
<div class="wrapper">
<div class="animated">
Text
</div>
</div>
<div class="content">
Lorem ipsum
</div>
</div>
</div>
Edited after comment:
You can take the animated element out of its parent (i.e. the element which has overflow: hidden), on a higher level in the HTML code - as a sibling to the container. I did that in the snippet below, and also added a z-index that places the animated element above the container:
.app {
overflow: hidden;
}
.container {
width: 260px;
max-height: 400px;
background: blue;
left: 10px;
right: 10px;
top: 10px;
position: fixed;
z-index: 500;
overflow-y: auto;
}
.wrapper {
height: 250px;
padding: 10px;
margin: 5px;
background: yellow;
top: 5px;
position: sticky;
}
.content {
height: 600px;
margin: 5px;
background: orange;
}
#keyframes fly-to-top {
10% {
top: 150px;
right: 80%;
width: 50px;
}
30% {
top: 120px;
right: 70%;
width: 45px;
}
60% {
top: 75px;
right: 40%;
width: 40px;
}
100% {
top: 10px;
right: 160px;
width: 35px;
}
}
.animated {
position: fixed;
right: unset;
top: 165px;
width: 50px;
background: red;
color: white;
animation: fly-to-top linear 2s forwards;
display: flex;
align-items: flex-start;
z-index: 501;
}
<div class="app">
<div class="container">
<div class="wrapper">
</div>
<div class="content">
Lorem ipsum
</div>
</div>
<div class="animated">
Text
</div>
</div>
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
So, I have gallery that contains some photos. I want to make when the image hovered then some information of the person is shows up, the name of person and the their role.
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
color: white;
width: 100%;
height: 0;
transition: .5s ease;
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> HIS JOB </div>
</div>
</div>
I used overlay to make the info shows up, but why the text is not in order and its not on the photo? I want its in the middle bottom on the photo. any suggestion? thanks before.
below is updated snippet
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
position:relative;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 5px;
left: 5px;
right: 0;
overflow: hidden;
color: white;
width: calc(100% - 10px) ;
height: 0;
transition: .5s ease;
display:block;
background:rgba(0,0,0,0.5);
}
.flag:hover .biodata{
height:calc(100% - 10px);
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> President of INASGOC </div>
</div>
</div>
See this fiddle
CSS
.biodata {
z-index:100;
}
.flag:hover .biodata {
height:100%
}
Use this Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
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%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">
<p style="padding:20px;">I am Mr. Alven</p>
</div>
</div>
</div>
</body>
</html>
On the link there is an example; I have three elements, in this case, the body with the a universe background, the div, with a white background and an img where in the middle there is a hole. I want to see the first UNIVERSE background inside the heart shape and not the second/WHITE.
https://jsfiddle.net/adrianvcch/t053p4hb/
html {
background-color: black;
}
body {
margin: 50px;
background-color: white;
height: 500px;
}
.heart {
position: relative;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>
CSS Masking
Mask # MDN
html {
background-image: url(http://scienceblogs.com/startswithabang/files/2013/02/2xcluster.jpg);
}
body {
margin: 50px;
text-align: center;
}
.heart {
position: relative;
display: inline-block;
height: 200px;
background: white;
-webkit-mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>
EDIT:
USING AN IMAGE:
Since the real case needs to use an image here's what can be done:
CODE SNIPPET:
body {
margin: 50px;
background-color: white;
height: 500px;
}
html,
.heart {
background-color: black;
}
.heart {
position: relative;
max-height: 200px;
margin: 0 auto;
overflow: hidden;
display: inline-block;
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>
SOLUTION:
USING A CSS SHAPE:
Here's something you could try:
Use a heart shape with plain CSS.
Set the same background-color in your html and heart with multiple selectors separated by comma using the same css property.
CODE SNIPPET:
body {
margin: 50px;
background-color: white;
height: 500px;
}
.heart {
display: inline-block;
height: 60px;
width: 60px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
}
.heart:before,
.heart:after {
content: "";
border-radius: 50%;
height: 60px;
width: 60px;
position: absolute;
}
.heart:before {
left: 0;
top: -30px;
}
.heart:after {
left: 30px;
top: 0;
}
html,
.heart,
.heart:before,
.heart:after {
background-color: black;
}
.heart-wrapper {
background-color: #c95253;
padding: 105px 80px 35px 80px;
display: inline-block;
}
<div class="heart-wrapper">
<div class="heart"></div>
</div>
Add this changes into your codes, But your image should be transparent to adapt the background color.
html {
background:url(https://source.unsplash.com/category/nature);
}
body {
margin: 50px;
height: 500px;
}
.heart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
img{
width:100%;
height:200px;
}
I want the text in the blue box to appear on its opening, but it should be fixed, not adjusting to the blue box width.
I also need some ideas as to what can be other interesting ways to display the text in a similar manner that I just did. (ie not visible initially but on hovering, text visible)
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
width: 400px;
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
you can just use transform with scale or translate:
scale:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-4px) scale(0,1);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(4px) scale(1,1);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
translate:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
You can make the text as sibling to the background. Check out the fiddle.
https://jsfiddle.net/gwbdrskg/
This is the HTML
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<div class="background"></div>
<p class='text'>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</div>
</body>
And the CSS
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
display: inline-block;
position: relative;
width: 400px;
}
#about_text .background {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about_text .text {
position: absolute;
top: 0;
}
#about {
top: 10%;
}
#about_button:hover + #about_text .background {
width: 400px;
}