I've built a CSS only accordian... (And I specifically have been asked to build this without JavaScript).
So far my code is working fine. And I'm using the <input type="checkbox" checked="checked" /> to achieve this.
The problem I am having, is that the content I am hiding/toggling, includes hyperlinks. And when my accordian is closed, the hyperlinks are still clickable, even with the accordian is closed.
IE - if you were to hover 40px-50px under the copy "Choose another cool destination", you can't see the content. But you can still hover over the (invisible) hyperlinks. And even click them.
How can I stop this from happening?
I don't want my hyperlinks to be clickable. Only when the accordian is open!
Here is a codepen where you can see this:
https://codepen.io/ReenaVerma1981/pen/qBdbbWJ
ul {
list-style: none;
padding: 0px;
}
.readme {
background-color: transparent;
color: #ff6600;
font-family: "easyjet_rounded_demi",Arial,Helvetica,sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 22px;
padding: 0;
border: 0;
}
.accordion {
margin: 0 auto;
width: 100%;
}
.accordion__item {
float: left;
position: relative;
width: 100%;
background-color: transparent;
border-radius: 4px;
margin-bottom: 40px;
}
.accordion__item span {
color: #ff6600;
margin-top: 1rem;
position: absolute;
left: 280px;
top: 0;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.accordion__item input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 50px;
z-index: 1;
opacity: 0;
}
.accordion__item input[type=checkbox]:checked ~ div.panel {
float: left;
margin: 5px 0;
max-height: 0;
opacity: 0;
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.accordion__item input[type=checkbox]:not(:checked) ~ span {
padding-top: 5px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion__item input[type=checkbox]:checked ~ span {
padding-top: 5px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.panel {
background-color: transparent;
border: 1px solid grey;
}
<body>
<div class="accordion">
<ul class="">
<li class="accordion__item">
<input type="checkbox" checked="checked" />
<p class="readme">Choose another cool destination</p>
<span class="">
<svg viewBox="1 1 22 22" width="1em" height="1em" aria-hidden="true" focusable="false" class="icon-svg"><path d="M21.7 6.79a1 1 0 00-1.41 0L12 15.08 3.71 6.79a1 1 0 00-1.41 0 1 1 0 000 1.42l9 9a1 1 0 001.42 0l9-9a1 1 0 00-.02-1.42z"></path></svg>
</span>
<div class="panel">
<strong>
London,
NYC,
LA,
LAX,
Dublin,
Liverpool,
Manchester,
Dubai,
Hong Kong,
Singapre.
</strong>
</div>
</li>
</ul>
</div>
</body>
</html>
.accordion__item input[type=checkbox]:checked ~ div.panel {
float: left;
margin: 5px 0;
max-height: 0;
//opacity: 0; instead use display: none
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
Mark accepted answer, if you feel answer is coreect
Try using pointer-events
.accordion__item input[type="checkbox"]:checked ~ div.panel {
float: left;
margin: 5px 0;
max-height: 0;
opacity: 0;
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
pointer-events: none;
}
.panel {
background-color: transparent;
border: 1px solid grey;
pointer-events: all;
}
Related
I'm designing the front end of an e-commerce website and while looking through some inspiration I found a really nice effect involving a button and a after on that button, that when hovering over it, the text of the button would go up and at the same time an icon would replace it. You can see what I mean here. I probably won't use this on the project but I got really confused trying to mimic this effect while using Dev Tools, and just ending up with a cart icon on the bottom of the page and would love to know how to create something similar to this.
This is the final result
I almost got to something but I can't seem to make the text and the icon move at the same time, sometimes the icon wouldn't move at all and just the whole button would do, and not the text.
Any ideas on how this could be achieved with CSS? I already went through CodePen to find something similar and I'm not really sure how this effect is called to google it
EDIT: Already tried this code on an with a button class.
.button {
background: none;
font-weight: 600;
line-height: inherit;
margin: 0;
padding: 0 15px;
margin-top: 0;
position: relative;
text-align: center;
vertical-align: top;
-webkit-transition: color 0.15s linear 0s,-webkit-transform 0.3s linear 0s;
text-transform: uppercase;
transition: color 0.15s linear 0s,transform 0.3s linear 0s;
}
.button:hover {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.button:after {
background-color: inherit;
border-color: inherit;
border-style: inherit;
border-width: inherit;
font-size: 18px;
font-weight: 400;
height: auto;
margin: 0;
position: absolute;
left: 0;
top: 100%;
text-align: center;
width: 100%;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation: none;
animation: none;
}
.button:hover:after {
top: 150%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Here is a simple example using a psuedo element and font-awesome icon
.btn {
background-color: turquoise;
border-radius: 10px;
color: white;
padding: 5px 10px;
position: relative;
overflow: hidden;
height: 20px;
display: inline-block;
transition: all .3s;
}
.btn span {
position: relative;
top: 0;
transition: all .3s;
}
.btn::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f217";
position: absolute;
left: 50%;
transform: translatex(-50%);
top: 40px;
transition: all .3s;
font-size: 20px;
}
.btn:hover {
background-color: blue;
}
.btn:hover span {
top: -30px;
}
.btn:hover::after {
top: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<a href="#" class="btn">
<span>Add to cart</span>
</a>
Here is a slightly simpler example using two different p tags instead of text/svg. It shouldn't be too much trouble to convert:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
button {
width: 100px;
height: 40px;
overflow: hidden;
border: unset;
border-radius: 10px;
background-color: turquoise;
transition: all 200ms;
}
button:hover {
background-color: blue;
}
div {
height: 80px;
transform: translateY(0%);
transition: inherit;
}
div:hover {
transform: translateY(-50%)
}
p {
display: flex;
align-items: center;
justify-content: center;
color: white;
height: 50%;
font-size: 18px;
font-weight: 600;
}
<button>
<div>
<p class="one">text one</p>
<p class="two">text two</p>
</div>
</button>
I just downloaded an HTML and CSS template online and want to modify the code to adjust the hamburger menu icon to the right and have the menu slide from the right side but I had no idea about which part I should change
I have attached a screenshot of the interface below for reference. Thanks!
/*menu*/
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: tomato;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ffffff;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
/*----------------------------------menu----------------------------*/
.section {
position: relative;
height: 100vh;
}
.section .section-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#booking {
font-family: 'Montserrat', sans-serif;
background-image: url('../img/dog.jpeg');
background-size: cover;
background-position: center;
}
#booking::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(143, 215, 230, 0.6);
}
.booking-form {
background-color: #fff;
padding: 60px 20px;
-webkit-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.booking-form .form-group {
position: relative;
margin-bottom: 30px;
}
.booking-form .form-control {
background-color: #ebecee;
border-radius: 4px;
border: none;
height: 40px;
-webkit-box-shadow: none;
box-shadow: none;
color: #3e485c;
font-size: 14x;
}
.booking-form .form-control::-webkit-input-placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form .form-control:-ms-input-placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form .form-control::placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form input[type="date"].form-control:invalid {
color: rgba(62, 72, 92, 0.3);
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control+.select-arrow {
position: absolute;
right: 0px;
bottom: 4px;
width: 40px;
line-height: 32px;
height: 32px;
text-align: center;
pointer-events: none;
color: rgba(62, 72, 92, 0.3);
font-size: 14px;
}
.booking-form select.form-control+.select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form .form-label {
display: inline-block;
color: #3e485c;
font-weight: 700;
margin-bottom: 6px;
margin-left: 7px;
}
.booking-form .submit-btn {
display: inline-block;
color: #fff;
background-color: #1e62d8;
font-weight: 700;
padding: 14px 30px;
border-radius: 4px;
border: none;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.booking-form .submit-btn:hover,
.booking-form .submit-btn:focus {
opacity: 0.9;
}
.booking-cta {
margin-top: 80px;
margin-bottom: 30px;
}
.booking-cta h1 {
font-size: 52px;
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
.booking-cta p {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
}
footer {
position: relative;
height: 0px;
width: 100%;
background-color: #333333;
}
p.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 0.7em;
text-align: center;
bottom:0;
}
HTML Code:
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="booking" class="section">
<div class="section-center">
<div class="container">
<div class="row">
<div class="col-md-7 col-md-push-5">
<div class="booking-cta">
<h1>Bring Your Pet to Work</h1>
<p>Caring and Loving Pet service
</p>
</div>
</div>
<div class="col-md-4 col-md-pull-7">
<div class="booking-form">
<form>
<div class="form-group">
<span class="form-label">Where do you work? </span>
<input class="form-control" type="text" placeholder="Enter an address or zipcode">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Drop off</span>
<input class="form-control" type="date" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Pick up</span>
<input class="form-control" type="date" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<span class="form-label">Pet?</span>
<select class="form-control">
<option>Cat</option>
<option>Dog</option>
<option>Others</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<span class="form-label">Service</span>
<select class="form-control">
<option>Day Care</option>
<option>Boarding</option>
<option>Sitting</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
</div>
<div class="form-btn">
<button class="submit-btn">Check availability</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
//about the white space try set the margin-top of the body at 0;
//about the the hamberger icon try this:
nav {
display:flex;
flex-direction: flex-end; }
To move the hamburger to the right side, make sure your #menuToggle position is fixed or absolute, then removeleft: 50px; and add right: 50px; and if you want more top space you can increase top attribute value, ex: top: 100px; or top: 0; if you don't want any top space.
I've commented the CSS bellow, in case you were wondering what i've changed.
Here is the CSS code you should use: (I've tested it and it's working for me)
#menuToggle {
display: block;
position: fixed;
top: 50px; /** NOTE: decrease The pixels if want less space */
right: 50px;/** NOTE: Change This line */
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ffffff;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0;/** NOTE: Change this line */
padding: 50px;
padding-top: 125px;
right: -50px; /*NOTE: Add this line */
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translateX(100%);/** NOTE: Change this line */
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
/*----------------------------------menu----------------------------*/
Below is code to a hamburger menu which I got from a Github Gist. What I want to know is why is the last bar's height not changing and how can I add rounded corners on the bars? Oh, and how can I change the height between the bars? If anyone else has CSS to a single div hamburger menu with those features, let me know.
.hamburger {
display: block;
position: absolute;
top: .5em;
right: .5em;
height: 2.5em;
width: 2.5em;
border: .8em solid rgba(0,133,255,1);
box-shadow: 0 0 0 .1em rgba(255,255,255,0),
inset 0 .3em 0 0 rgba(255,255,255,1),
inset 0 1em 0 0 rgba(0,133,255,1),
inset 0 1.3em 0 0 rgba(255,255,255,1),
inset 0 2em 0 0 rgba(0,133,250,1),
inset 0 2.5em 0 0 rgba(255,255,255,1);
}
<div class="hamburger"></div>
Here's one for you. You can adjust the roundness, thickness and color as you wish.
.menu {
position: relative;
display: inline-block;
width: 30px;
height: 5px;
top: 0px;
border-radius: 5px;
background: #000;
margin: 0;
}
.menu::before {
content: "";
position: absolute;
top: 10px;
left: 0px;
width: 30px;
height: 5px;
border-radius: 5px;
background: #000;
}
.menu::after {
content: "";
position: absolute;
top: 20px;
left: 0px;
width: 30px;
height: 5px;
border-radius: 5px;
background: #000;
}
<div class="menu"></div>
I had this one originally animate to a cross. Without animation you can reduce the code.
Creating the lines with box-shadow will prevent you from rounding them.
You may use pseudo-elements instead
.hamburger-menu
{
width:30px;
height:5px;
background-color:#111;
border-radius:5px;
position:relative;
}
.hamburger-menu:after, .hamburger-menu:before
{
content: '';
width: 100%;
height:5px;
background-color:#111;
position:absolute;
border-radius:5px;
}
.hamburger-menu:after
{
top:10px;
}
.hamburger-menu:before
{
top:20px;
}
<div class="hamburger-menu"> </div>
With the box-shadow method there's no way to add a border-radius, however this is other approach (Close hover is a plus ;) )
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
*:hover,
*:after:hover,
*:before:hover {
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.right {
background: #000;
padding: 10px;
}
.right .bar {
width: 40px;
margin: auto;
border-radius: 2px;
height: 8px;
margin-top: 5px;
display: block;
background: #fff;
}
.right:hover .container-bar {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.right:hover .bar {
width: 40px;
margin: auto;
height: 8px;
margin-top: 5px;
display: block;
background: #fff;
}
.right:hover .bar:nth-child(1) {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.right:hover .bar:nth-child(2) {
opacity: 0;
}
.right:hover .bar:nth-child(3) {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div class="right triggerMenu">
<div class="container-bar">
<a href="javascript:void(0);">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
</div>
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.
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>