I'm creating an "Artist Table" at the following URL: http://beta2.thrivemusic.com/artists/
As you can see, if you hover over an artist, 3 social icons appear. However, different bugs appear on different browsers so I need some help with the cross-browser functionality of my code.
FIREFOX: works perfectly
GOOGLE CHROME: Facebook icon link does not work
MOBILE (APPLE + ANDROID): The front side of each artist does not appear on default, the backside is shown instead
Here's how I did it: http://jsfiddle.net/samkimdesign/A7MZ3/2/
/* Artists Flip */
#f1_container {
position: relative;
margin: 10px auto;
width: 200px;
height: 175px;
}
#f1_card {
width: 200px;
height: 175px;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
backface-visibility: inherit;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-image: url("http://beta2.thrivemusic.com/wp-content/uploads/2014/07/flip_back.png");
backface-visibility: hidden;
z-index: 9999999999999;
}
Any help would be greatly appreciated, thank you! :)
Try adding
Position: relative
to the class .face.back.
Mine was the same situation. Adding relative position for the back div worked.
Related
I come back here looking for your wisdom. I have been working on a website and I did some css to make a width transform animation effect behind some text, and it works fine using hover, buuut I would like to have the same effect only with an automatic animation (with some delay that works with the scroll), but saddly I don't know how.
Any ideas ?
Thanks so much !
here the website:
http://231e47.com/accueil-cf/
The hover effect is on the text "we are here!"
Here my CSS:
<style>
.highlight { display: inline-block;
color: #343434;
text-decoration: none;
position: relative;
z-index: 0;
}
.highlight::after {
position: absolute;
z-index: -1;
bottom: 10px;
left: 0%;
transform: translateX(0%);
content: '';
width: 0px;
height: 43%;
background-image: linear-gradient(120deg, #48d1de 0%, #84fab0 180%);
transition: all 250ms;
}
.highlight:hover {
color: #343434;
}
.highlight:hover::after {
height: 43%;
width: 108%;
}
</style>
THANKS A LOT !
world {
width: 100%;
height: 100%;
position: absolute;
perspective:800px;
}
bg {
width: 100%;
height: 100%;
position: absolute;
z:1;
transform:rotateX(20deg) rotateY(10deg);
background: url(https://images.pexels.com/photos/1154498/pexels-photo-1154498.jpeg?auto=compress&cs=tinysrgb&h=1250);
}
layer_wrap {
width: 350px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
mix-blend-mode: overlay;
z:100;
perspective:500px;
transform-style:flat;
backface-visibility:hidden;
}
layer {
position:relative;
background: rgba(0, 122, 255,0.8);
padding: 20px;
color: #fff;
text-transform: uppercase;
font-family: "Arial";
font-size: 30px;
text-align: center;
transformOrigin:50% 50% 50%;
transform:translateX(-50%) translateY(-50%) rotateX(30deg) rotateY(5deg) translateZ(0.001px);
}
<world>
<bg></bg>
<layer_wrap>
<layer>THIS IS A LAYER</layer>
</layer_wrap>
</world>
In the example the bg container and the layer_wrap container must be on the same level to be able to use mix-blend-mode and for other requirements of the Project.
The Results how it is rendered in Safari and Chrome are different. Safari cuts the half of the Layer rendering the whole world in one container. transformStyle preserve-3d or other Tricks were not helpful.
Also a transformZ is not the solution since it would change the size and distance to viewer.
Hope one of you guys have a good solution for this. Cheers !
The white gap seems to be a popular issue. Yet I dont seem to be able to solve it with conventional solutions.
link to website https://bomengeduld.github.io/debadkamers/
link to style.css: https://github.com/bomengeduld/debadkamers/blob/master/style.css
(use inspector in mobile view) to detect the bug:
.mainmenu-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999999;
-webkit-transition: 0.3s;
transition: 0.3s;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px !important;
padding: 0px !important;
}
When I use the following it gets fixed, but then I loose the styling of menu bar.
overflow-x: hidden;
The following solved my problem
.container {
overflow: hidden;
}
I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
I want to display content on mouse enter with a flip effect as shown in this sample site http://www.taboola.com/
When you hover to the Drive Traffic section a blue colored div is flipped over. How can I do this with CSS3?
The answer is right there in the code. Use your browser's inspection tools to find the relevant code per element. Here on StackOverflow we normally don't give freebies, i.e. we expect you to do some effort and not simply come here asking for this or that. Now that you know this, I extracted the relevant code from the source code. It's up to you to make it fit your needs.
.cta3 li {
perspective: 1000;
padding: 0;
display: block;
width: 33.3%;
text-align: center;
float: left;
position: relative;
}
.cta3 li .cta3 {
opacity: 0;
transform-origin: bottom;
transform: rotateX(90deg);
transition: 400ms;
width: 100%;
position: absolute;
bottom: 0;
background: #3570CC;
text-align: center;
z-index: 2000;
font-size: 15px;
padding: 20px;
}
.cta3 li:hover .cta3 {
bottom: -10px;
opacity: 1;
transform: rotateX(0deg);
}