Here is a snippet of my Project Code:
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
input, button {
font-family: 'Montserrat', sans-serif;
}
.img_main_container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn_sign_up, .btn_login:hover {
background: #5d8ffc;
color: #fff;
border: 1px solid #5d8ffc;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.btn_login, .btn_sign_up:hover {
background-color: Transparent;
background-repeat:no-repeat;
color: #ffffff;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
cursor:pointer;
overflow: hidden;
outline:none;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<!DOCTYPE html>
<html>
<body>
<div class="img_main_container">
<img src="https://natgeo.imgix.net/subjects/headers/ND%20header%20(1).jpg?auto=compress,format&w=1920&h=960&fit=crop" alt="Storm" style="width:100%;">
<div class="centered">
<button class="btn_sign_up">Sign up</button>
<button class="btn_login">Login</button>
</div>
</div>
</body>
</html>
Everything works as you can see. But I want that the two buttons are side by side like this in that image here:
I tried so many examples but nothing worked. And I still can't figure out what's wrong here. It would be great if anyone could help. Thanks in advance. :)
Since you are using display:block on your buttons (.btn_sign_up, .btn_login), you can't make two buttons side by side, because block covering whole horizontal section.
Instead of this use display:inline-block and you will have buttons side by side.
More information you can get on the W3Schools
Flexbox would be a good solution for this. Add display: flex to the .centered class. This will place direct children of .centered side by side.
.centered {
display: flex;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use Flexbox for this issue.This is the better solution. Add display: flex to the .centered class.
.centered { display: flex; align-items: center}
Related
I have a block called case-card which consists of a child div called case-card__wrapper that houses text.
On case-card hover, I want the case-card__wrapper to move up slightly. Not in one action, but as transition.
I feel like I have the general idea, but unsure on how to get the transition to work? At the moment, it just phases from one spot to another:
.case-card {
height: 560px;
width:600px;
color: #ededed;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transform: translateY(20px);
transition: all .3s ease-in-out;
background-color: #333;
overflow: hidden;
}
.case-card__wrapper{
position: absolute;
transition: 0.5s;
/*top: 0; Don't want to add this because I want the text to be centered in the div and rather not define a number since the div heights may vary */
}
.case-card__title{
font-size: 16px;
}
.case-card:hover .case-card__wrapper {
top: 150px;
}
<div class="case-card">
<div class="case-card__wrapper">
<h4 class="case-card__title">Title</h4>
<p class="case-card__subtitle">Subtitle</p>
</div>
</div>
I'm trying to do this just via CSS. Any ideas?
If you cannot set initial value simply use transfrom. You can also remove position:absolute
.case-card {
height: 560px;
width:600px;
color: #ededed;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transform: translateY(20px);
transition: all .3s ease-in-out;
background-color: #333;
overflow: hidden;
}
.case-card__wrapper{
transition: 0.5s;
}
.case-card__title{
font-size: 16px;
}
.case-card:hover .case-card__wrapper {
transform:translateY(-100%);
}
<div class="case-card">
<div class="case-card__wrapper">
<h4 class="case-card__title">Title</h4>
<p class="case-card__subtitle">Subtitle</p>
</div>
</div>
I want each button "Read more" of each div to be aligned in the same level (and in this case at the bottom of the div). The problem is that I don't want to give a specific height to the divs and neither change any markup or style.
I could use a bunch of pseudo class selectors but I would like to keep the code simple and maybe there's a simpler way.
Here's the working fiddle
.btn{
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;}
Flexbox can do that.
It will set all the columns to equal height and tell the button to be at the bottom of each column.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*::before,
*::after {
box-sizing: border-box;
}
.row {
display: flex;
}
#services {
background-color: rgb(265, 265, 265);
color: #424242;
}
#services .col-3 {
text-align: left;
float: none;
display: flex;
flex: 0 0 25%;
padding: 10px;
flex-direction: column;
}
#sevices h3 {
margin: 10px 0
}
.btn {
margin-top: auto;
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;
-webkit-transition: color 0.8s, background-color 0.8s;
transition: color 0.8s, background-color 0.8s
}
<section id="services">
<!-- Services Starts Here -->
<div class="wrapper">
<h2>SERVICES</h2>
<div class="divider"></div>
<div class="row">
<div class="col-3">
<h3>Consulting and audit</h3>
<p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
Read more
</div>
<div class="col-3">
<h3>Web Development</h3>
<p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
Read more
</div>
<div class="col-3 right-align">
<h3>Search Engine Optimization</h3>
<p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
Read more
</div>
<div class="col-3 right-align">
<h3>Pay Per Click Management</h3>
<p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
Read more
</div>
</div>
</div>
</section>
Assuming I've understood you correctly, I've made the following amendments:
.btn{
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;
-webkit-transition: color 0.8s, background-color 0.8s;
transition: color 0.8s, background-color 0.8s;
position: absolute;
bottom: 0px;
}
.wrapper {
position: relative;
}
added position: absolute; to your btn class
added bottom: 0px to compliment the position (again to the btn class)
added position: relative; to a wrapper class so btn knows what it is positioning itself within.
You may need to update your existing CSS to adjust to the changes.
Updated Fork:
https://jsfiddle.net/exaboofu/
One solution entails using flexbox and absolute positioning:
https://jsfiddle.net/aLbu6frL/6/
.row {
display: flex;
flex-direction: row;
padding-bottom:40px;
}
.column {
flex: 0 0 auto;
position: relative;
}
.btn-bottom {
position: absolute;
bottom: -40px;
left: 0px;
right: 0px;
text-align:center;
}
Please add some more CSS in your existing and your button align with bottom please look below CSS code:
#services .right-align h3, #services .right-align p{
text-align: right;
}
#services .right-align .btn{
text-align:left;
}
.btn{
bottom: 0;
position:absolute;
}
You can set p tag a min-height. I just try it and it work's for me see sample code below. You can set p tag height based on your need.
#services .row .col-3 p {
width: 100%;
height: 300px;
}
I want to create a white hover caption that is centered vertical and horizontal. Around that i would like to add the same padding/margin and within some padding/margin with the title/caption centered, horizontal and vertical.
Because everything is responsive i think is best to use % for the most of the elements. Maybe the structure of the thumbnail/caption (html) needs to be written differently, i'm a bit stuck now.
In the example image i added some red marks what i mean.
Example:
---> FIDDLE
<div class="col-4">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption"><span>Project title centered vertical and horizontal</span></div>
</a>
</div>
One option can be the use of inline-block on the span element to vertical algin, and for the space use padding and box-sizing on caption. Check this:
.caption {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: white;
text-align: center;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
box-sizing:border-box;
padding:5px;
}
.caption span {
display: inline-block;
opacity: 0;
vertical-align:middle;
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
.caption:before {
content:" ";
height:100%;
width:0;
display:inline-block;
vertical-align:middle;
}
DemoFiddle
Check this fiddle.
Display the parent as a table-cell and use vertical align to center everything
.block {
background-color: #eee;
min-height: 200px;
display: table-cell;
vertical-align: center;
text-align: center;
}
.block-contents {
background-color: #fff;
padding: 20px;
margin: 20px;
}
You could always position the span absolutely too.
.caption span {
display: block;
position: absolute;
top:50%;
left:50%;
width:100%;
transform: translate(-50%, -50%);
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
JSfiddle Demo
How do you animate the text position smoothly. On hover, I want to re-position the text from text-align: center to text-align: left.
From this state:
To this state:
When I change the text-align on a :hover selector, the transition isn't smooth. It just jumps to the left alignment.
div.subject > div.subjectHeader {
height: 200px;
width: 100%;
color: white;
font-family: 'Lato', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
-moz-transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}
div.subject:hover > div.subjectHeader {
height: 30px !important;
line-height: 30px !important;
font-size: 1.5em !important;
text-align: left !important;
padding-left: 10px !important;
}
Here is the jsfiddle: Link to jsfiddle
The text-align property is not animatable, so CSS transitions will not be applied to it.
One possible workaround involves positioning your text inside a div absolutely and animating the left property instead. For example, modify your header HTML like this:
<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>
Then animate the CSS of .subjectHeaderInner using the left and margin properties. Don't change text-align as there's no way to animate that property. For example:
div.subject .subjectHeaderInner {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
-moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
left: 0;
margin-left: 0;
}
I updated your fiddle with this code: http://jsfiddle.net/kAPtL/5/
Other workarounds are possible depending on what kind of effect you want. There are some examples at Is it possible to transition text-alignment using CSS3 only?
Edit: Slightly better, since the closing animation can't be done with precision (without knowing the text length), I made it simpler but at least it doesn't look that bad.
This is an alternative that works pretty well, almost perfect I would say. The most notable trick is using white-space: nowrap to play with the box dimensions effectively.
HTML layout:
<div>
<h1>
<span>Some Title</span>
</h1>
<p>some cool explanation</p>
<p>more explanation</p>
</div>
CSS that delivers the magic:
div { border: 5px solid black; height: 18em; padding-top: 2em; position: relative; width: 20em; }
div:hover h1 { height: 1.2em; }
div:hover span { right: 10em; padding-top: 0; }
h1 { bottom: 0; height: 20rem; margin: 0; top: 0; width: 20rem; }
p { padding: 10px; }
span { font-size: 1em; left: 0; padding-top: 4em; position: absolute; right: 0; text-align: center; white-space: nowrap; }
h1, span { background: green; position: absolute; transition: all .3s ease; }
JSFiddle example
I have a button link which I want to align center, horizontally. Here is the code of button-
HTML:
<button class="downloadButton">Download</button>
Now, I want to align this in center, please suggest a possible CSS for the same, you can find this fiddle at JS Fiddle
P.S. :- I don't want to use <center> tag
Working FIDDLE Demo
Why use button inside an a. You can use just a. And make text-align of parent to center.
<div class="center">
Download
</div>
And the CSS of parent:
.center { text-align: center; }
And set a padding for the link:
.downloadButton { padding: 7px 20px 8px 20px; }
Try this:
body{ /* or parent element */
text-align: center;
}
a{
/* wraps this element according to width of the child element.(here) */
display: inline-block;
}
Working Fiddle
Here you are:
http://jsfiddle.net/594DY/1/
a {
display: block;
margin: 0 auto;
width: 150px;
}
Use this if you want to align center the whole button along with a tag
a {
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
Or use this if you want align button center inside a tag
a {
width: 100%;
display: block;
text-align: center;
}
Simple way to make a button center:
HTML TAG:
<button class="button" style="vertical-align:middle"><span>Login</span></button>
And use this CSS, adding some optional style:
.button {
display: inline-block;
border-radius: 4px;
background-color: #E80C11;
border: 5px;
border-radius: 15px;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}