The title isn't the best, but I didn't really know how to describe it better.
Problem is, when I hover over my #navigation div it looks like the font-style of my #content div changes. But it only does this on Chrome.
When I view it in Opera or FireFox, it acts normal.
Anyone an idea how to solve this?
P.s.: The Ubuntu font is loaded via Google Fonts.
HTML
<body>
<div id="wrapper">
<div id="navigation">
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Home</h2>
<h3 class="ca-sub">Startpagina</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">H</span>
<div class="ca-content">
<h2 class="ca-main">Portfolio</h2>
<h3 class="ca-sub">Websites en drukwerk</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">N</span>
<div class="ca-content">
<h2 class="ca-main">Over Ons</h2>
<h3 class="ca-sub">Doel en motto</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">K</span>
<div class="ca-content">
<h2 class="ca-main">Contact</h2>
<h3 class="ca-sub">Adresgegevens</h3>
</div>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Home - Portfolio - Over Ons - Contact</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque sed ligula vitae erat sollicitudin gravida.
Fusce adipiscing fringilla nibh ut feugiat.
In hac habitasse platea dictumst.
Donec ut nisi in dolor luctus eleifend.
Vivamus eleifend suscipit ipsum vitae posuere.
Morbi vestibulum erat eu nulla aliquet sagittis quis tempor lorem.
Sed orci nunc, dapibus eu cursus sit amet, fringilla a sapien.
Nullam non massa nunc.
</p>
</div>
</div>
CSS
body {
background: url('../images/noise.png') rgba(51, 51, 51, 1);
width: 100%;
height: 100%;
overflow-y: scroll;
}
#content h1, h2, h3 {
font-family: Ubuntu, sans-serif;
}
#content h1 {
color: rgba(0, 135, 255, 1);
font-size: 32px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(0, 135, 255, 1);
line-height: 36px;
}
#content h2 {
color: rgba(77, 184, 255, 1);
font-size: 24px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(77, 184, 255, 1);
line-height: 28px;
}
#content h3 {
color: rgba(130, 205, 255, 1);
font-size: 18px;
font-weight: bold;
margin: 4px;
border-left: 50px solid rgba(130, 205, 255, 1);
line-height: 22px;
}
#content p {
color: rgba(0, 0, 0, 1);
font-size: 16px;
margin: 4px;
font-family: Ubuntu, sans-serif;
line-height: 20px;
}
#content a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
border-bottom: 1px dashed rgba(0, 0, 0, 1);
transition: all 300ms ease;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
}
#content a:hover {
border-bottom: 1px dashed rgba(130, 205, 255, 1);
color: rgba(130, 205, 255, 1);
}
#wrapper {
margin: 10px auto;
padding: 0;
width: 940px;
height: 100%;
}
#navigation {
position: relative;
width: 220px;
height: 415px;
margin: 0 10px 0 0;
float: left;
}
#font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols.woff');
font-weight: normal;
font-style: normal;
}
.ca-menu{
padding: 0;
margin: 0 auto;
width: 220px;
}
.ca-menu li{
width: 220px;
height: 100px;
overflow: hidden;
position: relative;
display: block;
background: rgba(255, 255, 255, 1);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
margin-bottom: 5px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.ca-icon{
color: rgba(0, 0, 0, 1);
font-family: 'WebSymbolsRegular', cursive;
font-size: 24px;
text-shadow: 0px 0px 1px rgba(51, 51, 51, 1);
line-height: 100px;
position: absolute;
width: 70px;
left: 0px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 65px;
width: 370px;
height: 60px;
top: 32px;
}
.ca-main{
font-size: 24px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family: Ubuntu, sans-serif;
color: rgba(77, 184, 255, 1);
}
.ca-sub{
font-size: 14px;
color: rgba(102, 102, 102, 1);
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family: Ubuntu, sans-serif;
}
.ca-menu li:hover{
background: rgba(130, 205, 255, 1);
}
.ca-menu li:hover .ca-icon{
font-size: 36px;
color: rgba(130, 205, 255, 1);
opacity: 0.8;
text-shadow: -1px -1px 5px rgba(255, 255, 255, 1), 1px 1px 5px rgba(255, 255, 255, 1);
}
.ca-menu li:hover .ca-main{
opacity: 1;
color: rgba(51, 51, 51, 1);
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
opacity: 1;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
}
#-webkit-keyframes moveFromBottom {
from {
opacity: 0;
-webkit-transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-moz-keyframes moveFromBottom {
from {
opacity: 0;
-moz-transform: translateY(200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
#-ms-keyframes moveFromBottom {
from {
opacity: 0;
-ms-transform: translateY(200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
#-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(-200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-moz-keyframes moveFromTop {
from {
opacity: 0;
-moz-transform: translateY(-200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
#-ms-keyframes moveFromTop {
from {
opacity: 0;
-ms-transform: translateY(-200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
#content {
position: relative;
width: 700px;
margin: 0 0 0 10px;
padding: 0;
float: right;
}
Related
Hi I want to use <span class="glyphicon glyphicon-print"></span>
but to do it i need to put a bootstrap below
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
the problem is, my current table and some h1 text is changing the size or design if I put that bootstrap, what should I do? Any idea?
The resut is on this picture
With Bootstrap the icon of gly is working
but this is my default and i want the size of this table Without Bootstrap
my css is here
html {
height: 100%;
}
body{
height: 100%;
position: relative;
margin: 0;
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%);
font-family: 'Roboto', sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
}
table{
width:100%;
table-layout: auto;
}
.tbl-header{
position: relative;
background-color: rgba(255,255,255,0.3);
top: -45px;
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
background: black;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
section{
margin: 50px;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
*, *:before, *:after {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 0;
margin: 0;
}
a, a:visited, a:hover {
color: inherit;
text-decoration: none;
}
h1 {
position: relative;
top: -40px;
display: block;
margin: 0 auto 25px auto;
text-align: center;
font-size: 1.92em;
font-weight: 600;
letter-spacing: -0.055em;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 48px;
color: #03e9f4;
text-shadow: 0px 1px black;
}
h2 {
display: block;
margin: 0 auto 60px auto;
text-align: center;
font-weight: 400;
font-size: 1.25em;
letter-spacing: -0.015em;
}
.container {
position: relative;
margin: calc(75px + 2vh + 2vw) auto 0 auto;
padding: 0;
width: 100%;
max-width: 840px;
}
.search-box {
top: -40px;
position: relative;
width: 100%;
max-width: 360px;
height: 60px;
border-radius: 120px;
margin: 0 auto;
}
.search-box1 {
top: -60px;
position: relative;
width: 33%;
max-width: 300px;
height: 40px;
margin: 0 auto;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
}
input[type="text"]{ padding: 10px 10px; line-height: 5px; }
.search-icon, .go-icon {
position: absolute;
top: 0;
height: 60px;
width: 86px;
line-height: 61px;
text-align: center;
}
.search-icon {
left: 0;
pointer-events: none;
font-size: 1.22em;
will-change: transform;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: center center;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-o-transform-origin: center center;
transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.si-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.go-icon {
right: 0;
pointer-events: none;
font-size: 1.38em;
will-change: opacity;
cursor: default;
opacity: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.go-in {
opacity: 1;
pointer-events: all;
cursor: pointer;
transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.search-border {
display: block;
width: 100%;
max-width: 360px;
height: 60px;
}
.border {
fill: none;
stroke: #FFFFFF;
stroke-width: 5;
stroke-miterlimit: 10;
}
.border {
stroke-dasharray: 740;
stroke-dashoffset: 0;
transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-webkit-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-moz-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-o-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
}
.border-searching .border {
stroke-dasharray: 740;
stroke-dashoffset: 459;
transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-webkit-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-moz-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-o-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
}
#search {
font-family: 'Montserrat Alternates', sans-serif;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 120px;
border: none;
background: rgba(255,255,255,0);
padding: 0 68px 0 68px;
color: #FFFFFF;
font-size: 1.32em;
font-weight: 400;
letter-spacing: -0.015em;
outline: none;
color:black;
}
#search::-webkit-input-placeholder {color: #FFFFFF;}
#search::-moz-placeholder {color: #FFFFFF;}
#search:-ms-input-placeholder {color: #FFFFFF;}
#search:-moz-placeholder {color: #FFFFFF;}
#search::-moz-selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}
#search::selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}
.submit-btn {
display: inline-block;
float:right;
background-color: #000;
color: #fff;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
line-height: 24px;
padding: 8px 8px;
border: none;
cursor: pointer;
}
.submit-btn:hover {
text-decoration: underline;
background-color: white;
color: black;
border: solid;
border-width: 1px;
}
Generally speaking,
If your CSS comes after Bootstrap's, then Bootstrap is given priority and will override your CSS where possible.
If your CSS comes after Boostrap's, then in some cases, your CSS will be given priority.
Additionally, if you're planning to work with Bootstrap then being mindful of specificity moving forward can save you some headache. Plus, when all else fails and you are sure the issue is a clash between your CSS and Bootstrap then you can take a look at how that CSS rule is declared in Bootstrap CSS and that will likely give you some hint as to how to circumvent it.
Simple, just follow this pattern when you linked the bootstrap css and your custom css file to the head section.
Link bootstrap css first
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
Then link your custom css file
<link rel="stylesheet" href="css/style.css">
i have my link that was styled, but when I change link tag to button in html and css styling won't work. How can get that styling on button type submit note I can't get link to submit via js because of interference with stripe that's why i wanna get this one working
a styling that is working
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
a.animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
{% trans "pay" %}
button styling that won't work
button[type=submit].animated-button:link:after, button[type=submit].animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
button[type=submit].animated-button:link:hover, button[type=submit].animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
button[type=submit].animated-button:link:hover:after, button[type=submit].animated-button:visited:hover:after {
height: 450%;
}
button[type=submit].animated-button:link, button[type=submit].animated-button:visited {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
button[type=submit].animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
button[type=submit].animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
button[type=submit].animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
button[type=submit].animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
<button type="submit" href="" class="btn btn-sm animated-button thar-three">{% trans "pay" %}</button>
since a div is not a link, you can't use the selectors :link nor :visited. By simply removing them from your css, the result is way closer. Of course, you may have to implement a method to replace the use of :link and :visited
button[type=submit].animated-button:after, button[type=submit].animated-button:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
button[type=submit].animated-button:hover, button[type=submit].animated-button:hover {
color: #FFF;
text-shadow: none;
}
button[type=submit].animated-button:hover:after, button[type=submit].animated-button:hover:after {
height: 450%;
}
button[type=submit].animated-button, button[type=submit].animated-button {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
button[type=submit].animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
button[type=submit].animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
button[type=submit].animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
button[type=submit].animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
<button type="submit" href="" class="btn btn-sm animated-button thar-three">{% trans "pay" %}</button>
I am trying to create an effect without JavaScript, that when your mouse hovers over the image, where an image enlarges, gets a shadow, then has a transparent div with text inside comes down from the top of the image.
#note {
display: block;
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
-ms-transition: -ms-transform .3s ease-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out, transform .3s ease-out;
width: 125px;
height: 175px;
}
#note:hover {
-webkit-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-moz-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
width: 125px;
display: block;
width: 125px;
height: 175px;
}
#box1 {
position: absolute;
top: -10px;
left: 15px;
font-size: 15px;
width: 100px;
height: 100px;
}
#text1 {
opacity: 0;
transition: all 0.5s;
width: 100px;
height: 100px;
}
#note:hover #text1 {
opacity: 1;
}
#over {
background-color: grey;
position: relative;
top: 89px;
left: -7px;
width: 125px;
height: 176px;
}
<div id="note">
<img src="http://www.simpleimageresizer.com/_uploads/photos/b8804940/Chick_Pea_Wrap_1_125x175.jpg">
<div id="box1">
<div id="over"></div>
<div id="text1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at lacus leo. Fusce tempus eleifend ligula at bibendum. Proin lacus.
</p>
</div>
</div>
</div>
If you need any more info, please ask. I have searched wide and far for an answer to this question but seems I am new to code I do not know what keywords to type in. Any and all help is appreciated.
Here is a working example that accomplishes what you're asking. I adjusted your HTML and added the necessary CSS and marked the styles /* Added */. I generally just added some positioning to your text container and added another property into the animation.
#note {
display: block;
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
-ms-transition: -ms-transform .3s ease-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out, transform .3s ease-out;
width: 125px;
height: 175px;
overflow: hidden; /* Added */
position: relative; /* Added */
}
#note:hover {
-webkit-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-moz-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
display: block;
width: 125px;
height: 175px;
}
#text1 {
opacity: 0;
transition: all 0.5s ease 0s;
padding: 10px; /* Added */
width: 125px; /* Added */
height: 175px; /* Added */
position: absolute; /* Added */
bottom: 100%; /* Added */
left: 0px; /* Added */
-webkit-box-sizing: border-box; /* Added */
-moz-box-sizing: border-box; /* Added */
box-sizing: border-box; /* Added */
}
#note:hover #text1 {
opacity: 1;
bottom: 0px; /* Added */
}
<div id="note">
<img src="http://www.simpleimageresizer.com/_uploads/photos/b8804940/Chick_Pea_Wrap_1_125x175.jpg">
<div id="text1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
I am trying to create a rollover effect image with CSS. The image starts with just a title overlaid, then when hovered over a text overlay appears. I am happy with how it is going so far, except the text area that comes over the top the text runs off to the right. Also you can scroll up and down, but i am assuming this is the same problem?
https://jsfiddle.net/p27sf4e1/3/
HTML
<div class="service-box">
<p class="box-title">Social Media</p>
<div class="service-overbox">
<h2 class="title">Social Media</h2>
<p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus elit. Nam in justo sapien.</p>
</div>
</div>
CSS
.service-box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.service-box .title {
text-align: center;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.service-box:hover .title,
.service-box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.service-box .tagline {
text-align: center;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.service-box:hover .tagline,
.service-box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
.service-overbox {
background-color: #000000;
position: relative;
color: #fff;
z-index: 2;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
padding: 30px;
}
.service-box:hover .service-overbox { opacity: 0.7; }
.service-box:hover .box-title { opacity: 0; }
.service-box {
cursor: pointer;
position: relative;
overflow: auto;
height: 380px;
width: 100%;
max-width: 580px!important;
background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box-title {
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 38px;
line-height: 38px;
font-family: 'Anton', sans-serif;
color: #00AAC4;
}
.tagline {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
line-height: 28px;
}
.title {
font-size: 40px!important;
font-family: 'Anton', sans-serif;
font-weight: 600;
margin-bottom: 10px;
}
Appreciate any comments that may help to solve.
Thanks
If you're not supporting IE7 and lower, try adding a box-sizing: border-box; property to your .service-overbox rule. It looks like it's the legacy box-model's handling of padding that is tripping you up.
.service-box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.service-box .title {
text-align: center;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.service-box:hover .title,
.service-box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.service-box .tagline {
text-align: center;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.service-box:hover .tagline,
.service-box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
.service-overbox {
background-color: #000000;
position: relative;
color: #fff;
z-index: 2;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
}
.service-box:hover .service-overbox {
opacity: 0.7;
}
.service-box:hover .box-title {
opacity: 0;
}
.service-box {
cursor: pointer;
position: relative;
overflow: auto;
height: 380px;
width: 100%;
max-width: 580px!important;
background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box-title {
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 38px;
line-height: 38px;
font-family: 'Anton', sans-serif;
color: blue;
}
.tagline {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
line-height: 28px;
}
.title {
font-size: 40px!important;
font-family: 'Anton', sans-serif;
font-weight: 600;
margin-bottom: 10px;
}
<div class="service-box">
<p class="box-title">Social Media</p>
<div class="service-overbox">
<h2 class="title">Social Media</h2>
<p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus
elit. Nam in justo sapien.</p>
</div>
</div>
would you know how to force my H1 text to be placed below the blue category button? Currently it goes next to it. Many thanks
http://jsfiddle.net/TDBzN/
<div id="article" class="animated2 fadeInLeftBig">
<div class="article-close"></div>
<div class="category">#Category</div>
<h1>This is the H1</h1>
<p class="intro">Lorem ips um dolor sit amet, consectetur adipiscing elit. Nam sit amet diam nisl. Aliquam quis est eu elit facilisis aliquam. Pellentesque porta nunc diam <a class="various" href="#">Inline</a></p>
</div>
CSS:
#article {
/* opacity controlled via fadeInLeftBig */
position: absolute;
width: 600px;
left: 230px;
top: 0;
height:100%;
background-color: #fff;
opacity:0.9;
padding: 30px 50px 50px 50px;
z-index: 1000;
box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5);
}
#article .intro{
font-family: 'Open Sans', sans-serif;
font-weight:600;
}
#article h1 {
font-size: 33px;
color:#555;
font-style:italic;
}
#article h2 {
color:#555;
margin-bottom:5px;
}
#article p {
font-style: normal;
font-weight: 300;
/* color: #555; */
color: #555;
font-size: 15px;
line-height: 22px;
padding: 10px 0;
margin-top: -10px;
text-align:justify;
}
#article a {
color: #F15034;
text-decoration: none;
font-weight: bold;
}
#article a:hover {
border-bottom: 2px solid #F15034;
}
.category {
float: left;
text-align: center;
font-size: 12px;
color: white;
padding: 8px 18px;
margin: 18px 0 0 0px;
text-decoration: none;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-ms-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
background: rgba(71, 186, 255, 0.8);
}
You should clear: both; on the h1 tag. An alternative would be to create a clear:both; <div>, but that isn't required in this instance.
DEMO: http://jsfiddle.net/TDBzN/6/;
h1
{
clear:both;
}
To create a clear:both; div put this in between the h1 element and the floated element, in this case that is .category.
<div style="clear: both;"></div>
This is helpful just to insert where you need an element clearing and it isn't appropiate to clear the element directly.
Put clear left on your heading should work
#article h1 {
font-size: 33px;
color:#555;
font-style:italic;
clear:left;
}
See http://jsfiddle.net/TDBzN/2/
DEMO
Edit the class .category from:
.category {
float: left; /* REMOVE */
text-align: center;
font-size: 12px;
color: white;
padding: 8px 18px;
margin: 18px 0 0 0px;
text-decoration: none;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-ms-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
background: rgba(71, 186, 255, 0.8);
}
TO
.category {
max-width:70px; /* EDITED */
text-align: center;
font-size: 12px;
color: white;
padding: 8px 18px;
margin: 18px 0 0 0px;
text-decoration: none;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-ms-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
background: rgba(71, 186, 255, 0.8);
}
and it work fine.