transform / rotate CSS bugging out on safari browsers

transform / rotate CSS bugging out on safari browsers - html

I'm building a series of flip boxes which have an image and title on the front and then on the reverse a background with some hyperlinks
All works fine on most browsers however on safari the boxes flicker for a few seconds when flipped over.
Can anyone see something I've missed?
.flip-card {
background-color: transparent;
width: 250px;
height: 250px;
perspective: 1000px;
margin-left:50px;
}
.flip-card-inner {
position: absolute;
width: 100%;
height: 100%;
text-align: left;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(181deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: black;
color: black;
}
.box-caption {
position: absolute;
top: 55%;
left: 50%;
z-index: 2;
margin-right: -50%;
transform: translate(-50%, -50%);
color: white;
text-align:center;
padding-left:25px;
padding-right:25px;
font-size: 20px;
word-wrap: break-word;
display: block;
}
.flip-card-back {
padding-top:0px;
padding-left:25px;
background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(8,30,37,1) 18%, rgba(50,195,192,1) 100%);;
color: white;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
word-wrap: break-word;
padding-right:15px;
display: block;
font-size: 13px;
}
.flip-card-title {
padding-top:15px;
font-weight: bold;
padding-bottom: 10px;
color: white;
word-wrap: break-word;
padding-right:15px;
display: block;
font-size: 16px;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
a.one:link {
color: white !important;
text-decoration: none !important;
}
a.one:active {
color: white !important;
text-decoration: none !important;
}
a.one:hover{
color: white !important;
text-decoration: underline !important;
}
a.one:visited {
color: white !important;
text-decoration: none !important;
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="http://philk18.sg-host.com/wp-content/uploads/2020/09/card-test.jpg" alt="Avatar" style="width:250px;height:250px;opacity:0.5;">
<div class="box-caption">
<p> <b> Lines and Wrinkles </b> </p>
</div>
</div>
<div class="flip-card-back">
<div class="flip-card-title">Lines and wrinkles</div>
<a class="one" href="/skin-boosters" target="_blank"> - Skin Boosters</a><br><a class="one" href="/derma-fillers" target="_blank"> - Derma Fillers</a>
</div>
</div>
</div>
https://codepen.io/xeddir/pen/VwaJpme

.box-caption {
z-index: 0;
}
change z-index to 0 that should fix it

Related

I cannot center my button and don't know why [duplicate]

This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 1 year ago.
I tried to put a button in the center of my div but I couldn't though all my other contents are centered.
My code:
.middle {
width: 100%;
height: auto;
text-align: center;
position: relative;
}
.middle section {
padding: 18vh 6%;
line-height: 0.5;
color: #EE6352;
font-weight: 400;
font-size: calc(16px + 3vw);
}
.middle ul {
text-align: left;
}
.middle li {
font-size: calc(12px + 2vw);
line-height: 1.25;
color: #2A2D34;
}
.middle p {
font-size: calc(14px + 2.4vw);
font-weight: 400;
color: #2A2D34;
}
.upbutton {
padding: 10px;
background: #1ac6ff;
border-radius: 50%;
border-style: none;
cursor: pointer;
position: absolute;
top: 0px;
transition: background 0.3s;
box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
}
.upbutton img {
width: 25px;
height: 25px;
}
.upbutton:hover {
background: #00ace6;
-webkit-transform: scale(0.94);
-ms-transform: scale(0.94);
transform: scale(0.94);
}
.upbutton:active {
background: #0086b3;
}
<a id="middle">
<div class="middle">
</a>
<section>
<button class="upbutton"><img src="img/arrow.png"></button>
<h1>content</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<p>...and more</p>
</section>
</div>
I also searched on this problem and tried to put this into the .upbutton class:
margin:0;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
and it centered my button. But when I hover, it didn't center anymore.
I don't know why I'm kinda new to this. Can anyone explain and help me, tks a lot!

Remember to add a transform: translateX(-50%); on the :hover selector for the button, this way it wont go back. If you change the transform property on hover it overides the existing one, so it goes back to translateX(0)
.upbutton:hover {
background: #00ace6;
-webkit-transform: translateX(-50%) scale(0.94);
-ms-transform: translateX(-50%) scale(0.94);
transform: translateX(-50%) scale(0.94);
}

<head>
<style>
.middle
{
width: 100%;
height: auto;
text-align: center;
position: relative;
}
.middle section
{
padding: 18vh 6%;
line-height: 0.5;
color: #EE6352;
font-weight: 400;
font-size:calc(16px + 3vw);
}
.middle ul
{
text-align: left;
}
.middle li
{
font-size: calc(12px + 2vw);
line-height: 1.25;
color: #2A2D34;
}
.middle p
{
font-size: calc(14px + 2.4vw);
font-weight: 400;
color: #2A2D34;
}
.upbutton
{
padding: 10px;
background: #1ac6ff;
border-radius: 50%;
border-style: none;
cursor: pointer;
position: absolute;
top:50%;
left:50%;
transition: background 0.3s;
box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
}
.upbutton img{width: 25px;height: 25px;}
.upbutton:hover{ background: #00ace6;
-webkit-transform: scale(0.94);
-ms-transform: scale(0.94);
transform: scale(0.94); }
.upbutton:active{background: #0086b3;}
</style>
</head>
<a id="middle"><div class="middle"></a>
<section>
<button class="upbutton"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-up-arrow-icon-png-image_956434.jpg"></button>
<h1>content</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<p>...and more</p>
</section>
</div>
In this example you can just use 'position': absolute and top:50%,left:50%

If you're trying to center it just add
top: 50%; property to the .upbutton class

Try doing it directly in the HTML. EDIT: Try using JS.
<center><button onclick = "goToTop()" id = "buttonId"><img src="img/arrow.png"></img></button></center>
<script>
function goToTop(){
var currentLink = window.location.href;
window.location = currentLink+'#top';
}
</script>
Tell me if this doesn't work for you and I'll try to fix it. Also, please accept if this did work for you. It works for me in Chrome.

How do I edit this snippet in order to show buttons on the same line?

I found this nice snippet and I wanted to create the same kind of thing but with inline buttons. Adding a display: inline seems to not work and it also breaks the visual effect.
This is the HTML file:
<h1>Material design buttons (CSS-only)</h1>
<h2>Material design buttons with a ripple effect. This is CSS-only so there is no mouse detection, the ripple effect always starts from the same point.</h2>
<button class="btn" type="button"><span>Button</span></button>
<button class="btn orange" type="button"><span>Medium-length button</span></button>
<button class="btn red" type="button"><span>Extra-long button to let you appreciate the effect.</span></button>
This is the CSS file:
.btn {
position: relative;
display: block;
margin: 30px auto;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
background-color: #2ecc71;
color: #ecf0f1;
transition: background-color .3s;
}
.btn:hover, .btn:focus {
background-color: #27ae60;
}
.btn > * {
position: relative;
}
.btn span {
display: block;
padding: 12px 24px;
}
.btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
padding-top: 0;
border-radius: 100%;
background-color: rgba(236, 240, 241, .3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn:active:before {
width: 120%;
padding-top: 120%;
transition: width .2s ease-out, padding-top .2s ease-out;
}
/* Styles, not important */
*, *:before, *:after {
box-sizing: border-box;
}
html {
position: relative;
height: 100%;
}
body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #ecf0f1;
color: #34495e;
font-family: Trebuchet, Arial, sans-serif;
text-align: center;
}
h2 {
font-weight: normal;
}
.btn.orange {
background-color: #e67e22;
}
.btn.orange:hover, .btn.orange:focus {
background-color: #d35400;
}
.btn.red {
background-color: #e74c3c;
}
.btn.red:hover, .btn.red:focus {
background-color: #c0392b;
}
You can also try the snippet out on the codepen I linked.
How should I proceed? Is there a way to preserve the effect while putting the buttons on a line?

Wrap them in a container with display: flex.
<div class="btn-container">
<button class="btn" type="button"><span>Button</span></button>
<button class="btn orange" type="button"><span>Medium-length button</span></button>
<button class="btn red" type="button"><span>Extra-long button to let you appreciate the effect.</span></button>
</div>
And then
.btn-container {
display: flex;
}

You can use display: inline-block; to do this. When using inline-block you will keep the spacing properties you need, whilst allowing the element to display inline.
You can read more about inline block on W3Schools.
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Another way would be to make a parent wrapper that is display: flex; and align the children as you need using flexbox properties - but in this . case a simple display: inline-block should work.

You can try this:
.btn {
position: relative;
display: block;
margin: 30px auto;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
background-color: #2ecc71;
color: #ecf0f1;
transition: background-color .3s;
}
.btn:hover, .btn:focus {
background-color: #27ae60;
}
.btn > * {
position: relative;
}
.btn span {
display: block;
padding: 12px 24px;
}
.btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
padding-top: 0;
border-radius: 100%;
background-color: rgba(236, 240, 241, .3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn:active:before {
width: 120%;
padding-top: 120%;
transition: width .2s ease-out, padding-top .2s ease-out;
}
/* Styles, not important */
*, *:before, *:after {
box-sizing: border-box;
}
html {
position: relative;
height: 100%;
}
body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #ecf0f1;
color: #34495e;
font-family: Trebuchet, Arial, sans-serif;
text-align: center;
}
h2 {
font-weight: normal;
}
.btn.orange {
background-color: #e67e22;
}
.btn.orange:hover, .btn.orange:focus {
background-color: #d35400;
}
.btn.red {
background-color: #e74c3c;
}
.btn.red:hover, .btn.red:focus {
background-color: #c0392b;
}
.all-btn ul li{
list-style: none;
display: inline-block;
}
<h1>Material design buttons (CSS-only)</h1>
<h2>Material design buttons with a ripple effect. This is CSS-only so there is no mouse detection, the ripple effect always starts from the same point.</h2>
<div class="all-btn">
<ul>
<li><button class="btn" type="button"><span>Button</span></button></li>
<li><button class="btn orange" type="button"><span>Medium-length button</span></button></li>
<li><button class="btn red" type="button"><span>Extra-long button to let you appreciate the effect.</span></button></li>
<ul>
</div>

Place text in the middle of a vertical button

I Want to place the 'Upcoming' text in the middle of this vertical button.
this button is a bootstrap button with some custom CSS to align it vertically and to increase it's height and decrease it's width.
Things which I have tried so far are:
1.text-align:center;
padding
text-center(bootstrap 4 class)
But none of them seems to work.
Any idea?
this is my HTML and CSS
.list-group {
width: 100%;
}
.list-group-item-action {
color: black;
background: white;
}
.list-group-item-action:hover {
background: #3d6277;
color: white;
}
.container-fluid {
width: 100%;
}
.search {
width: 300px;
}
.img-fluid {
margin: 0 auto;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 5px;
margin: 2px;
font-size: 12px;
}
h2{
color: white;
position: absolute;
top: 190px;
left: 50px;
right:80px;
width: 100%;
}
.btn {
width:20px;
padding:10px;
height: 283px;
position: absolute;
z-index: 600085000;
}
h6{
font-size:22px;
text-align: center;
}
.btn btn-primary btn-sm{
background-color: #8064A2 !important;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.font-size{
font-size:10px;
font-weight:50px;
padding-left: 30px;
text-transform: capitalize;
}
.vertical{
text-align: horizontal;
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
}
<div class="row">
<button type="button" class="btn btn-danger btn-sm"><h6 class="vertical">Upcoming</h6></button>
<div class="list-group col-sm-2" *ngFor="let movie of upcomingMovies|search:movieName;">
<button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
<div class="image">
<img src={{movie.img}} class="img-fluid" id="first-row" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>
</div>
</button>
</div>
</div>

Please try this.I have added code i.e
.vertical{
left: -47px;
position: absolute;
margin: 0;
transform: rotate(-90deg);
}
.list-group {
width: 100%;
}
.list-group-item-action {
color: black;
background: white;
}
.list-group-item-action:hover {
background: #3d6277;
color: white;
}
.container-fluid {
width: 100%;
}
.search {
width: 300px;
}
.img-fluid {
margin: 0 auto;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 5px;
margin: 2px;
font-size: 12px;
}
h2{
color: white;
position: absolute;
top: 190px;
left: 50px;
right:80px;
width: 100%;
}
.btn {
width:20px;
padding:10px;
height: 283px;
position: absolute;
z-index: 600085000;
}
h6{
font-size:22px;
text-align: center;
}
.btn btn-primary btn-sm{
background-color: #8064A2 !important;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.font-size{
font-size:10px;
font-weight:50px;
padding-left: 30px;
text-transform: capitalize;
}
.vertical{
left: -47px;
position: absolute;
margin: 0;
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
}
<div class="row">
<button type="button" class="btn btn-danger btn-sm"><h6 class="vertical">Upcoming</h6></button>
<div class="list-group col-sm-2" *ngFor="let movie of upcomingMovies|search:movieName;">
<button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
<div class="image">
<img src={{movie.img}} class="img-fluid" id="first-row" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>
</div>
</button>
</div>
</div>

Multiple Modal Box - Pure CSS

I watched the tutorial Pure CSS Animated Modal/Lightbox. I was able to get the right result even when I changed the modal's corresponding link to an image. The problem is, whenever I add another image and link it to a different modal, the bottom part of both modal shows up when I open the page. Something like this. (Image 1) This also happens when I click on the images. (Image 2) Image Link
I placed all image modal links inside a pure css tab. And here're the codes I used.
EDIT (Full CSS I'm using on my page)
body {
background-image: url('https://lh4.googleusercontent.com/-MohfCSihE2I/VGRnxqZNuFI/AAAAAAAAADE/SgiIb4GEIY8/s2048/back.gif');
background-color: white;
color: black;
font-size: 16px;
font-family: trebuchet ms, helvetica, sans-serif;
letter-spacing: 3px;
}
#font-face {
font-family: bf-font;
src: url(http://bf.amebagames.com/font/bf-font.woff") format('woff');
}
.bf {
font-family: bf-font;
}
.cardbg {
background-image: url('https://lh3.googleusercontent.com/-kV3vTS7WzFQ/Vq8iIGo8mOI/AAAAAAAADS4/qv3O9n1L0gI/s2048-Ic42/cmnTitleRed.png');
text-align: center;
color: #FFF;
border-radius: 3px;
}
.cardattri {
font-family: bf-font;
font-size: 26px;
text-align: center;
}
.cardtitle {
font-size: 20px;
color: #FFF;
text-align: center;
}
.story {
background-image: url('https://lh3.googleusercontent.com/-AVgAM5nK6ec/Vq8iIDN1uyI/AAAAAAAADSw/dThSw3Re6-E/s2048-Ic42/bg%252520brown.png');
width: 200px;
height: 26px;
margin: 0px 75px;
border-radius: 5px;
}
/* TABS */
.tabs {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.tabs:after {
content: "";
clear: both;
display: block;
height: 542px;
}
.tabs li {
float: left;
}
.tabs li > input {
display: none;
}
.tabs li > label {
display: inline-block;
border: 1px solid #000;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
}
.tabs li:last-child > label {
border-right-width: 1px;
}
.tabs .tab-content {
display: none;
position: absolute;
left: 0;
padding: 20px;
border: 1px solid #000;
width: 768px;
height: 500px;
overflow-y: scroll;
}
/* TABS Functional */
.tabs li > input:checked + label {
background-color: #DDD;
}
.tabs li > input:checked ~ .tab-content {
display: block;
}
/* MODAL */
.modal-container {
position: fixed;
background-color: #FFF;
background-image: url('https://lh3.googleusercontent.com/-J73bzJ9PVJE/Vq8iIGmBxlI/AAAAAAAADS0/-uNM7fG2sI4/s2048-Ic42/bg_new%252520no%252520border%2525202.png');
width: 100%;
max-width: 350px;
height: 100%;
max-height: 550px;
left: 50%;
padding: 5px;
border: 2px solid #512d2d;
border-radius: 5px;
-webkit-transform: translate(-50%, 200%);
-ms-transform: translate(-50%, 200%);
transform: translate(-50%, 200%);
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%
}
.modal:target:before {
display: block;
}
.modal:target .modal-container {
top: 18%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
a.boxclose {
float: right;
margin-right: -18px;
margin-top: -16px;
width: 22px;
height: 22px;
text-align: center;
text-decoration: uppercase;
color: #947a4e;
font-size: 20px;
border-radius: 12px;
background-color: #FFF;
box-shadow: 0px 0px 2px
rgba(0,0,0,0.4);
}
a.boxclose:link {
text-decoration: none;
}
.boxclose::before {
content: "";
}
#modal-close {}
/* CARD ANIMATION */
.panel {
width: 350px;
height: 438px;
margin: auto;
position: relative;
-moz-border-radius: 0px 50px 0px 50px;
-webkit-border-radius: 0px 50px 0px 50px;
-o-border-radius: 0px 50px 0px 50px;
border-radius: 0px 50px 0px 50px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
overflow: hidden;
}
.card {
width: 350px;
height: 438px;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
background-repeat: no-repeat;
width: 230px;
-moz-border-radius: 0px 50px 0px 50px;
-webkit-border-radius: 0px 50px 0px 50px;
-o-border-radius: 0px 50px 0px 50px;
border-radius: 0px 50px 0px 50px;
}
.back {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background-repeat: no-repeat;
width: 230px;
-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
-o-border-radius: 50px 0px 50px 0px;
}
.panel:hover {
-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
-o-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
overflow: hidden;
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
HTML code
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="king" checked>
<label for="king">King</label>
<div class="tab-content">
<img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" width="250px"><br>
<img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" width="250px">
<div class="modal" id="saku">
<div class="modal-container">
<span class="bf">x</span>
<div class="cardbg">
<span class="cardattri">q</span>
<span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
</div><br>
<div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px"> 何を想像した？</div><br>
<div class="panel">
<div class="front card">
<img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" alt="SSR1 Card" width="350px" height="438px">
</div>
<div class="back card">
<img src="https://lh3.googleusercontent.com/-r3CHpi4DxSw/VfVhhUpmDaI/AAAAAAAACA4/VldO2dZdhno/s2048-Ic42/1c.jpg" alt="SSR 1 CG" width="350x" height="438px">
</div>
</div><br>
</div>
</div>
<div class="modal" id="ssr">
<div class="modal-container">
<span class="bf">x</span>
<div class="cardbg">
<span class="cardattri">q</span>
<span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
</div><br>
<div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px"> 何を想像した？</div><br>
<div class="panel">
<div class="front card">
<img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" alt="SSR1 Card" width="350px" height="438px">
</div>
<div class="back card">
<img src="https://lh3.googleusercontent.com/-d_7dx1qF0Pc/VfViJRPBiEI/AAAAAAAACA4/UairgGEi-jc/s2048-Ic42/11c.jpg" alt="SSR 1 CG" width="350x" height="438px">
</div>
</div><br>
</div>
</div>
</div>
</li>
</ul>
How do I fix this?
Note: The modal contains a lot of div because I included a card animation on the content.

If you replace the images inside the anchor tags with just standard text it works fine, as so:
Link One
Link Two
The issue is therefore likely to be in your CSS, where something is conflicting, with the image elements you are putting inside.
You might need to post your full code so people on here can get a bit of a better idea as to what is going on.

Issue with Chrome and Transform

As you may see in the video (link bellow) I have an animaton that makes that an images moves with the mouse over.
It works fine with all browsers but I have a problem.
When I use and I click on "Información rápida" and then close the popup, the image disapears, and I can only see basic information of the property and a white space.
After closing he popup I should see the image again and the basic information when the mouse is over.
I'd like to know if it is a problem with my code or if there is an issue with Chrome and Transform.
This only occurs with Chrome browser.
The code is use for this in my css file is:
.ngm-thumb .mask {
background-color: #fff;
opacity: 1;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);
transition: all 0.3s ease-in-out 0s;
I copy and paste my html code at the bottom.
Any idea?
I use Chrome v. 45.0.2454.101 m
If you think it is a coding error, any suggestion to fix this?
Link to the video: https://youtu.be/5Gp-0WpC_jQ
Site link: http://www.quieroapartamento.com/es/
Thanks for your help.
My complete CSS code in template.css for ngm-thumb class
.ngm-thumb {
border: 1px solid #ebebeb;
-webkit-box-shadow: 0 3px 3px #cccccc;
-moz-box-shadow: 0 3px 3px #cccccc;
box-shadow: 0 3px 3px #cccccc;
float: left;
height: 261px;
overflow: hidden;
position: relative;
width: 100%;
margin-bottom: 50px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.ngm-thumb .mask {
height: 261px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.ngm-thumb a > img {
border-bottom: 1px solid #ebebeb;
display: block;
position: relative;
width: 100%;
}
.ngm-thumb .main {
border-bottom: 1px solid #ebebeb;
height: 55px;
}
.ngm-thumb .main h5 {
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 10px 0 0 20px;
position: relative;
}
.ngm-thumb .main .price {
border-color: -moz-use-text-color #ebebeb #ebebeb;
border-style: none solid solid;
border-width: medium 1px 1px;
display: inline;
float: right;
font-size: 18px;
font-weight: bold;
height: 55px;
padding: 6px 25px;
background-color: rgba(90, 186, 198, 0.05);
color: #75c5cf;
}
.ngm-thumb .main .price span {
color: #979797;
display: block;
font-size: 11px;
font-weight: normal;
text-align: center;
}
.ngm-thumb .content {
padding: 20px;
position: relative;
text-align: left;
}
.ngm-thumb .content button {
margin-top: 5px;
}
.ngm-thumb .content p span {
display: block;
font-weight: bold;
}
.ngm-thumb .content i {
padding-right: 5px;
}
.ngm-thumb img {
transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb .mask {
background-color: #fff;
opacity: 1;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);
transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb:hover .mask {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.ngm-thumb:hover a > img {
-webkit-transform: translateY(-206px);
-moz-transform: translateY(-206px);
-o-transform: translateY(-206px);
-ms-transform: translateY(-206px);
transform: translateY(-206px);
}
#media (min-width: 992px) and (max-width: 1199px) {
.ngm-thumb {
font-size: 12px;
}
.ngm-thumb,
.ngm-thumb .mask {
width: 100%;
height: 261px;
}
.ngm-thumb .main .price {
padding: 10px;
font-size: 12px;
border-right: none;
}
.ngm-thumb .main,
.ngm-thumb .main .price {
height: 55px;
}
.ngm-thumb .mask {
background-color: #fff;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);
This is my html code:
<patTemplate:tmpl name="pageoutput" unusedvars="strip">
{JOMRES_POPUPURL_GLOBALVAR}
<div title="{PROPERTY_NAME}" class="col-xs-12 col-sm-12 col-md-6 col-lg-4 appear" data-animated="flipInX" data-start="{ANIMATION_DELAY}">
<div class="ngm-thumb">
<img src="{IMAGEMEDIUM}" alt="{PROPERTY_NAME}" title="{PROPERTY_NAME}" class="img-responsive" />
<div class="mask">
<div class="main">
<h5>{PROPERTY_NAME} {STARSIMAGES} {SUPERIOR}</h5>
<div class="price">
{PRICE_PRICE} <span>{PRICE_POST_TEXT}</span>
</div>
</div>
<div class="content">
<p>{PROPERTY_STREET}, {PROPERTY_TOWN}, {PROPERTY_POSTCODE}, {PROPERTY_REGION}, {PROPERTY_COUNTRY}</p>
{QUICKINFORMATION}
{MOREINFORMATION}
</div>
</div>
</div>
</div>
<script>
jomresJquery(document).ready(function(){
jomresJquery('#module_{RANDOM_IDENTIFIER}_popup').appendTo("body");
});
</script>
<div class="modal fade" id="module_{RANDOM_IDENTIFIER}_popup"></div>
</patTemplate:tmpl>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

transform / rotate CSS bugging out on safari browsers - html

.box-caption { z-index: 0; } change z-index to 0 that should fix it

Related

I cannot center my button and don't know why [duplicate]

How do I edit this snippet in order to show buttons on the same line?

Place text in the middle of a vertical button

Multiple Modal Box - Pure CSS

Issue with Chrome and Transform

Categories

Resources