I'm trying to center my button on the page, but can't seem to get it right.
I've tried to auto de left and right margins but didn't work. And I don't want to center it by gut feeling in percentages. Can somebody help me out, would appreciate it. It's for my intership :D
here u have the html. I used basic html and pure grids and bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>karakters page</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css">
<link rel="stylesheet" href="stylekarakters.css">
</head>
<body>
<div class="fixed-bg">
<div class="pure-g">
<div class="pure-u-1-2">
<a href="#null" class="homeknop" onclick="window.location.href='index.html';">
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<div class="pure-u-1">
<img class="pure-img logo" src="img/Karakters-logo_ZW2.png"></img>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<div class="imgcontainer">
<img class="pure-img" src="img/pic-karakters.jpg" />
</div>
</div>
<div class="pure-u-1">
<h1 class="reveal1">
<strong>Ontwerp- en communicatiebureau.<br>Groot geworden in de boeken, <br>met grafiek in de genen</strong>
</h1>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<div class="textcontainer">
<h2><strong>Nu bieden we het hele pallet aan communicatieondersteuning.</strong></h2>
</div>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-strategy.png" />
<h4>strategische begeleiding <br>(ook pers en digitaal)</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-web.png" />
<h4>webontwikkeling</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-campagne.png" />
<h4>creëren van campagnes</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-expo.png" />
<h4>maken van tentoonstellingen als grafische vormgeving</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-boeken.png" />
<h4>ontwerpen en zetten <br>van boeken, etc.</h4>
</div>
<div class="pure-u-1-5"></div>
</div>
<div class="pure-g">
<div class="pure-u-1"><h2><strong>We zijn er voor u, allemaal!</strong></h2></div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_nonprofit-3.png" />
<h4>non-profit</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_government-3.png" />
<h4>overheid</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_uitgeverij-4.png" />
<h4>uitgeverijen</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_profit-3.png" />
<h4>profit</h4>
</div>
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3"></div>
<div class="pure-u-1">
<h2>Kortom: alles op maat van de opdrachtgever.<br>Maar altijd vanuit hetzelfde kader:
<br><strong> duurzaam, kwalitatief</strong> en <strong>authentiek</strong>
</h2>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<h4 class="projecten">projecten</h4>
</div>
<div class="pure-u-1">
<button onclick="window.location.href='catpageK.html';" class="buttonK"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="scriptkarakterspage.js"></script>
</body>
</html>
And here is the css, also basic:
body{
background-color: rgba(111, 179, 160, 0.1);
margin-top: 5em;
margin-left: auto;
margin-right: auto;
width: 90%;
}
.imgcontainer .pure-img {
max-width: 40%;
margin-left:auto;
margin-right: auto;
margin-top: 3em;
}
.icon{
max-width: 66%;
margin-left: auto;
margin-right: auto;
}
/* h3
}
{
margin-left: -250px;
margin-right: 250px;
margin-top: 100px;
line-height: 1.3em;
} */
h1,h2{
padding:1em;
text-align: center;
}
h4{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.pure-u-1 .textcontainer p {
margin-left: auto;
margin-right: auto;
width: 40%;
font-size: 1.5em;
text-align: center;
}
.textcontainer{
margin-top: 5em;
}
.pure-img.logo {
max-width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: -55px;
}
.projecten {
margin-left: auto;
margin-right: auto;
margin-top: 2em;
color:#6fb3a0;
}
div .pure-u-1 .buttonK
{
border: solid #6fb3a0 2px;
background-color: #6fb3a0;
color: #ffffff;
width: 50px;
height: 50px;
border-radius: 100%;
text-align: center;
}
div.pure-u-1 button.buttonK{
margin-left: 50%;
margin-bottom: 2em;
margin-top: 1.5em;
}
a {
margin-left: 100px;
color:#6fb3a0;
}
example
You can do this:
Give left:50% to your button, and then have half of is size and put in negative in the margin-left
div.pure-u-1 button.buttonK {
left: 50%;
margin-bottom: 2em;
margin-top: 1.5em;
position: relative;
margin-left: -25px;
}
DEMO HERE
There's a really easy way with CSS3 when you push something from the left by 50%:
.class {
margin-left: 50%;
transform: translateX(-50%);
}
Works vertically as well with transform: translateY(-50%);.
The 2 can be combined as transform: translateX(-50%) translateY(-50%);.
You may need to add vendor-specific prefixes when using this. Searching for "CSS auto prefix" should yield online services to do it quickly for you.
Try this. Add display:block; to the button. That will make the margin:auto; work.
.buttonK {
margin: auto;
display: block;
}
<div class="pure-u-1">
<button onclick="window.location.href='catpageK.html';" class="buttonK">Button</button>
</div>
Related
I have made this site(http://koulick-project.surge.sh/)as a project but cannot make it fully responsive. How to make it responsive, so that it looks good on mobile/tablets. So far, I could make the headings and text responsive. But cannot make the circles for the clock responsive.
Here is my Html file-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/coming_soon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>JWOC Coming Soon</title>
</head>
<body>
<div class="centerdiv">
<a href="https://www.facebook.com/jwoc2k20" target="_blank">
<i class="fa fa-facebook fa-3x"></i>
</a>
<a href="https://www.linkedin.com/company/jwoc/" target="_blank">
<i class="fa fa-linkedin fa-3x"></i>
</a>
</div>
<div class="section">
<div class="section">
<div id="particles-js">
<break>
<h1 style="color:white"><b>JWOC</b></h1>
<h1 style="color:white"><b> COMMENCING SOON</b></h1>
<hr>
</div>
</div>
</div>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-xs-3 col sm-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
</div><!-- /.clock -->
<hr>
</div><!-- /.countdown-wrapper -->
<!-- footer section -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="demo/js/kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$('.countdown').final_countdown({
'start': 2062139200,
'end': 2088461320,
'now': 2087461319
});
});
</script>
</body>
</html>
Here is my Css file-
*{
margin: 0;
padding: 0;
}
html, body {
background-repeat:no-repeat;
height: 100vh;
overflow:hidden;
}
html {
background-image: url('../img/open.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/open1.jpg');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js
{
z-index: 99999;
height: 500%;
display: flex;
justify-content: center;
align-items: left;
}
.particles-js-canvas-el{
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
h1{
font-size: 70px;
letter-spacing: 15px;
text-align: center;
}
a{
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
margin: 10px;
line-height: 110px;
}
a i{
transition: all 0.3s linear;
}
a:hover i{
transform: scale(1.4);
}
.fa-linkedin{
color: #0097e6;
}
.fa-facebook{
color: #3b5998;
}
/*
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
*/
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media only screen and (min-width: 393px) and (max-width: 767px) {
h1{
font-size: 40px;
letter-spacing: 10px;
}
.text {
font-size: 15px;
}
.text .val {
font-size: 15px;
}
.text .type-time {
font-size: 15px;
}
.clock-item .inner {
width: 150%;
}
}
Can anyone please help.
Try using a column break to split up the timer into multiple rows on smaller screen sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#column-breaks
Tablet+
D H M S
Phone
D H
M S
enter image description here
I would like to list items A and B side by side in CSS. What should I do?
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
CSS code
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
I hope a tags are arranged in a horizontal line.
I want the A and B in the picture in a row, and I've adjusted the width of the parent element, but it didn't work.
Just change the HTML structure to use the propper bootstrap classes.
<div class="container">
<div class="row align-items-center">
<div class="col logo">
<a class="title" href="">
</a>
</div>
<div class="col-auto category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
jsFiddle
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
MODIFY THE CSS
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
Use bootstrap grid system.
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
height: 78px;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to center an image but it doesn't works :(
I use the parameter text-align: center;. The size of the image is 600x600px and I need to center horizontal in the website.
My code is:
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
width: 600px;
height: 600px;
display: block;
margin: 0 auto
text-align: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
At moment it shows:
Could you help me?
Thanks!
try this code for the .img-sugarCSS:
.img-sugar{
width: 600px;
height: 600px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
try this css, you have some syntax error and spelling mistake
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCam UI</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="http://placehold.it/350x150"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
</body>
If you would insert your img via css it would be easiely done with this here:
.img{
background:url(yourimg.png) center center no-repeat;
}
margin: 0 auto you forgot to end with semicolon ;
.img-sugar{
width: 600px;
weight: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
Use the below mentioned Padding value.
#share-buttons img {
width: 50px;
padding: 100px;
border: 0;
box-shadow: 0;
display: inline;
}
try with this code
.img-sugar{
width: 600px;
weight: 600px;
display: block;
position: absolute;
vertical-align: center;
horizontal-align: center;
}
maybe this works?
I am trying to change the opacity of my images, so that I can use a hover affect later on, to change the opacity back, creating a cool affect. The problem is the opacity attribute doesn't work! I can't seem to figure out the solution. Is it possible that Bootstrap is preventing this somehow?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
And my CSS: (the opacity attribute is in .affect)
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 50px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 1;
background-color: #070606;
}
You need to have a base state, and a hover state for your image. Change your CSS to:
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s;
}
.affect:hover img {
opacity: 1;
}
This creates the hover effect.
Opacity default value is 1 try making it 0.5.
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>