I am generally way off on which bit of code to edit.. but I am trying to move my yellow hover box on my images to the bottom side of the image. I tried changing the 'top' tags to 'bottom', with various different measurements, but it either just moves to the middle area or vanishes all together..
Could anyone help me get this figured out? It's driving me insane.. haha!
The website I am making for a friend is here;
http://outside.hobhob.uk/test/
The code I think I should be editing is the following;
.imghover a div {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
left: 0px;
}
.imghover a:hover img {
position: relative;
min-width: 100%;
left: 0;
-webkit-transform: scale(1.05);
/* Safari and Chrome */
-moz-transform: scale(1.05);
/* Firefox */
-ms-transform: scale(1.05);
/* IE 9 */
-o-transform: scale(1.05);
/* Opera */
transform: scale(1.05);
}
.imghover a .imghover-text {
display: inline;
position: absolute;
left: -100%;
top: 10px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
I could be wrong though?
Any help would be greatly appreciated :D
edit css
.imghover a div {
position: absolute;
width: 100%;
/* height: 100%; */
overflow: hidden;
/* top: 0px; */
left: 0px;
}
and
.imghover a .imghover-text {
display: inline;
position: absolute;
left: -100%;
bottom: 10px;/*change top to bottom*/
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.imghover a:hover .imghover-text {
top: auto:
bottom: 0;
}
.imghover a .imghover-text span {
vertical-align: top;
}
add this much of the code and it will work flawlessly
Related
I've a burger icon, like this - when clicked it becomes a "X" using only CSS3 (website link here)
But my client are seeing something like this (only on iPad):
My question is:
1) What can be causing this?
2) How can I reproduce errors like this as I don't have an iPad and resizing the browser (developer tools) doesn't reproduce the error?
.mobile-nav {
position: fixed;
z-index: 10103;
bottom: 40%;
left: 45%;
margin-top: -230px;
pointer-events: none;
}
.mobile-nav .mobile-nav-bg {
/* this is the stretching navigation background */
position: absolute;
z-index: 10102;
top: 0;
right: 0;
width: 60px;
height: 60px;
border-radius: 30px !important;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
webkit-transition: height .2s, box-shadow .2s;
-webkit-transition: height .2s, box-shadow .2s;
transition: height .2s, box-shadow .2s;
}
.mobile-nav-trigger {
position: absolute;
z-index: 10103;
top: 2px;
right: 0;
height: 60px;
width: 60px;
border-radius: 50% !important;
overflow: hidden;
white-space: nowrap;
color: transparent;
pointer-events: auto;
}
.mobile-nav-trigger span,
.mobile-nav-trigger span::after,
.mobile-nav-trigger span::before {
/* this is the hamburger icon */
position: absolute;
width: 16px;
height: 2px;
background-color: #000;
}
.mobile-nav-trigger span {
/* middle line of the hamburger icon */
webkit-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
left: 50%;
top: auto;
bottom: 50%;
right: auto;
webkit-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.mobile-nav-trigger span::after,
.mobile-nav-trigger span::before {
/* top and bottom lines of the hamburger icon */
content: '';
bottom: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
webkit-transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.mobile-nav-trigger span::before {
webkit-transform: translateY(-6px);
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.mobile-nav-trigger span::after {
webkit-transform: translateY(6px);
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
.nav-is-visible .mobile-nav-trigger span {
background-color: transparent; }
.nav-is-visible .mobile-nav-trigger span::before {
webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.nav-is-visible .mobile-nav-trigger span::after {
webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://188.166.163.149/static/theme/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('nav').click(function() {
$(this).toggleClass('nav-is-visible');
});
});
</script>
<div class="box">
<nav class="mobile-nav visible-xs visible-sm nav-is-visible"><a class="mobile-nav-trigger menu-trigger" href="#0"><span aria-hidden="true"></span></a><ul><li></li></ul><span aria-hidden="true" class="mobile-nav-bg"></span></nav>
</div>
In many cases your vendor prefixes are not correct. For example:
.mobile-nav-trigger span {
...
webkit-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
...
}
The first statement of these 3 is not legal in any browser I know of. The first line (no dash before "webkit") needs to be removed in all cases. The other two lines are valid; and should be present in all cases.
Although I haven't tested this definitively, it certain could be causing the issue you are experiencing.
Sign up for a free Apple Developer account, Download XCode and you can run the iOS device emulator as an iPad. That will allow you to test your potential fixes. You do need a Mac, however. But, that's the only way I know how you could do it other than buying or borrowing an iPad.
I have this code from the Hover.css pack:
.hvr-underline-from-left{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #0F9E5E;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover::before, .hvr-underline-from-left:focus::before, .hvr-underline-from-left:active::before {
right: 0;
}
What this does is that it adds a buttom border to a button that appeares from the left on hover.
But the effect i want is this, but multible times. So this should be added multible times with 0.1s delay every time, and an other color. How would i do this?
I tried using ::before(n) but it didn't work.
You can use after pseudo class to get the double underline effect.
//same as before class except for transition delay and bottom position you can adjust that as needed
.hvr-underline-from-left::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 10px;
background: #0F9E5E;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
// on hover effect for after same as before class.
.hvr-underline-from-left:hover::after,
.hvr-underline-from-left:focus::after,
.hvr-underline-from-left:active::after {
right: 0;
}
//to add more
.hvr-underline-from-left .hvr-underline-from-left{
position:absolute;
height:100%;
width:100%;
background:transparent;
top:0;
left:0;
z-index:1000;
}
.hvr-underline-from-left .hvr-underline-from-left:after{
bottom:20px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-underline-from-left .hvr-underline-from-left:before{
bottom:30px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
// and div tags look like this
<div class="hvr-underline-from-left">
<div class="hvr-underline-from-left">
</div>
</div>
****Please be careful once you give the inner container z-index and bring it to the front with 100% height and width any elements inside the main container might not be clickable.
Alternatively You can use css animation keyword for getting this multiple times underline effect with different color.and Adjust time according to your need. eg
.hvr-underline-from-left{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover::before {
animation:colorUnderline 2s;
animation-fill-mode: forwards;
}
#keyframes colorUnderline{
0%{
right:100%;
background: #0F9E5E;
}
25%{
background: #0F9E5E;
right:0;
}
26%{
background: #8e44ad ;
right:100%;
}
50%{
background: #8e44ad ;
right:0;
}
51%{
background: #e74c3c ;
right:100%;
}
75%{
background: #e74c3c ;
right:0;
}
76%{
background: #f1c40f ;
right:100%;
}
100%{
right:0;
background: #f1c40f ;
}
}
<body>
<div class="hvr-underline-from-left">Test</div>
</body>
I want to make it so that I can have multiple buttons opening their own transition. As of now I have this code which works fine, however, if I repeat it or even change the css (class) to match an individual button, the primary button will still open the secondary transition and the newly placed secondary button remains inactive.
CSS
<style>
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #fff;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: absolute;
background: #fff;
overflow-y: visible;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: none;
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button 1 */
.menu-button {
position: absolute;
z-index: 1000;
margin: 1em;
padding: 0;
width: 10px;
height: 50px;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
opacity: 1;
top: 510px;
left: 855px;
-ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.2em;
bottom: 0.4em;
left: -1px;
background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
content: '';
}
.menu-button:hover {
opacity: 1;
}
/* Close Button */
.close-button {
width: 50px;
height: 50px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
opacity: 0;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Comments */
.menu-wrap {
position: absolute;
z-index: 1000;
width: 429.0500011444092px;
height: 600.875px;
right: 0;
background: #0C0C0C;
top: 6px;
padding: 0;
font-size: 1.15em;
-webkit-transform: translate3d(500px,0,0);
transform: translate3d(500px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}</style>
BEING TRANSITIONED
<div class="menu-wrap">
</div>
BUTTON
<button class="menu-button" id="open-button">Open Menu</button>
DEMO
DEMO
As you can see if you scroll towards the middle of the demo result window you will see the first button opening both transitions while the second button does nothing, I want the second button to open the bottom transition on its own.
Created a LightBox effect using pure CSS and HTML, no JS. The image appears, but on the right side of the screen, halfway cut off, and partially underneath my Nav bar. Half of the screen is shaded behind the image.
It appears like it would work, aside from it being off-center and behind the navigation. From the code at hand, is there anything that appears it could be doing this? I'd be happy to post more code if necessary. Thank you!
/*Eliminates padding, centers the thumbnail */
body,
html {
padding: 0;
margin: 0;
text-align: center;
float: left;
}
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
margin: 94px 20px 20px 20px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
clear: both;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
<div id="gravel-button">
<a class="lightbox" href="#gravel-1">
<h7>Photo & Info</h7>
</a>
</div>
<div class="lightbox-target" id="gravel-1">
<img src="http://www.sbsg.com/wp-content/uploads/2010/02/58minus.jpg">
<a class="lightbox-close"></a>
</div>
Currently i am creating a website and i want to use the "new" css3 animations. It is hard to described what i've done, so i made a small example with the problem. When you hover with the mouse over the block the animation in firefox is very ugly. Furthermore the background image jitters 1px. The font gets blurry and the logo too. In IE11, Chrome its all working very fine :)
Here is the link: https://jsfiddle.net/0gk3fhnv/ or full code:
<ul id="parallelogram-box">
<li class="parallelogram">
<div class="text">Very nice descr Text! And here sec Row...</div>
<div class="logo"></div>
</li>
</ul>
.
body {
background: #eee;
}
#parallelogram-box {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-align: center;
}
#parallelogram-box li {
text-align: left;
position: relative;
list-style-type: none;
display: inline-block;
min-height: 400px;
min-width: 200px;
max-width: 200px;
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
margin: 20px;
overflow: hidden;
border-radius: 5%;
backface-visibility: hidden;
}
#parallelogram-box li:hover .text {
bottom: 0px;
transition: bottom 0.2s ease-in 0s;
-webkit-transition: bottom 0.2s ease-in 0s;
-moz-transition: bottom 0.2s ease-in 0s;
-o-transition: bottom 0.2s ease-in 0s;
}
#parallelogram-box li:hover {
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
}
#parallelogram-box li:before {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
li.parallelogram:before {
background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Mountains/AlaskanMonoliths.jpg);
background-position: -1000px -200px;
}
#parallelogram-box p {
font-size: 20px;
text-align: center;
}
#parallelogram-box li > * {
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
.text {
background: rgba(36,36,36,.9);
color: #e9e9e9;
position: absolute;
bottom: -75px;
height: 100px;
width: 180px;
z-index: 1;
font-size: 14pt;
margin-left: -12px;
text-align: center;
padding: 10px 25px 10px 25px;
transition: bottom 0.1s ease-in 0s;
-webkit-transition: bottom 0.1s ease-in 0s;
-moz-transition: bottom 0.1s ease-in 0s;
-o-transition: bottom 0.1s ease-in 0s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.logo {
position: absolute;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
}
.parallelogram .logo {
background: url(http://www.findthatlogo.com/wp-content/uploads/2011/10/dallas-mavericks-logo.png) no-repeat;
background-size: contain;
background-position: 50% 50%;
}
Can you please tell me, whats causing this strange behavior? Is there a work around?
I've found a solution!
Look at https://jsfiddle.net/0gk3fhnv/5/
#-moz-document url-prefix() {
#parallelogram-box li:after {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: none !important;
}
li.parallelogram:after {
background-image: url(for_firefox_skewed_picure.png);
}
}
I changed the transition duration for firefox to 0.01 seconds and a linear animation to obscure the blurry text. Furthermore i added the css code above, which adds a exception for Firefox. The code removes the skew of the background image. So you have to add a custom background image for Firefox and skew it for your % in Photoshop or another photo editing software.