I'm using a fixed header on a site to keep the logo & menu elements visible when scrolling the content elements. There appears to be a javascript that creates a "slide" or transistion down to the top of the content from the top/under the header. I find this annoying but can live with it.
My problem is that on iPad devices (works fine on iPhone) using Safari that the content never scrolls to the top of the content area. If you press and drag down on the screen you can see the content is nested under the header. Release the screen and it slides back up under the header.
All other browsers/OS work fine.
I incorporated some CSS that was supposed to handle all mobile devices and configured the elements below the header with padding/margin tags to give it some space. This seemed to work great except on some iPad mobile devices we get a A problem occurred with this webpage so it was reloaded. We remove this CSS and it loads fine.
So that nixes CSS as a fix so it leaves me with the obnoxious slide effect I'm thinking?
What is this slide content element in the first place and how do I make it responsive on all devices including Safari/iPad or how do I remove it or use CSS to correctly start at the top of the content?
Test site: http://www.goroyalshell.net/
UPDATED CSS isolated code that when inserted into the CSS page causes the error:
.property-item.featured:hover .property-item.featured.title-above-image .property-title::after {
background-color: transparent;
}
.property-item .property-thumbnail {
position: relative;
overflow: hidden;
}
.property-item a {
color: inherit;
}
.property-item img {
max-width: none;
width: 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#media (min-width: 768px) {
.property-item img {
width: -webkit-calc(120%);
width: calc(120%);
-webkit-filter: grayscale(0%);
filter: none;
-webkit-transform: translate3d(-10px, 0, 0);
-moz-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
-o-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
}
.property-item figcaption {
top: 0;
height: 100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (min-width: 768px) {
.property-item figcaption {
position: absolute;
text-align: right;
}
}
#media (min-width: 768px) {
.property-item:hover img {
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover.title-over-image .property-title,
.property-item:hover.title-over-image .tag,
.property-item:hover.title-above-image .tag-right {
opacity: 0;
}
}
.property-item:hover .property-excerpt {
opacity: 1;
}
.property-item:hover .property-excerpt::after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover .arrow-right {
opacity: 0;
}
.property-item .property-title {
overflow: hidden;
position: relative;
z-index: 0;
padding: 10px 15px;
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (min-width: 768px) {
.property-item .property-title {
text-align: right;
}
}
.property-item .title {
margin: 0 0 0.25em !important;
font-size: 1.4em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.property-item .address {
opacity: 0.6;
margin: 0 !important;
font-size: 1.1em;
text-transform: none;
}
.property-item .subtitle {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #999999;
}
.property-item .property-excerpt {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 15px 15px;
opacity: 0;
line-height: 1.7;
text-align: left;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (min-width: 768px) {
.property-item .property-excerpt {
display: block;
}
}
.property-item .property-excerpt span {
font-size: 1.4em;
color: #666666;
text-transform: uppercase;
}
.property-item .property-excerpt::after {
position: absolute;
opacity: 0.5;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #43becc;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.property-item .property-excerpt p {
margin-top: 0.5em;
font-size: 1.1em;
color: #999999;
}
.property-item .property-content {
text-align: center;
background-color: #fff;
}
.property-item .property-content .property-meta {
min-height: 85px;
}
.property-item .property-content .property-meta > div {
width: 50%;
/*
#media(min-width: 1200px) {
width: 25%;
}
*/
}
.property-item .property-price {
overflow: hidden;
padding: 0 15px;
line-height: 50px;
color: #666666;
text-align: left;
border-top: 1px solid #f6f6f6;
}
#media (min-width: 768px) {
.property-item .property-price {
line-height: 60px;
}
}
#media (min-width: 992px) {
.property-item .property-price {
font-size: 1.2em;
}
}
.property-item .property-price span {
font-weight: 300;
}
.property-item .property-price i {
opacity: 0.25;
line-height: inherit;
margin-right: 10px;
display:inline-block !important;
}
.property-item .property-price i:hover {
opacity: 0.75;
cursor: pointer;
color:#aaa !important;
}
.property-item .property-price .property-status {
display: inline-block;
display: none;
float: left;
font-size: 0.8em;
text-transform: uppercase;
}
.property-item .property-price .price-tag {
float: right;
color: #999999;
}
.property-meta {
padding: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.9em;
line-height: 2;
color: #999999;
text-align: center;
}
#media (min-width: 768px) {
.property-meta {
text-align: left;
}
}
.property-meta a {
color: #999999;
}
.property-meta a:hover {
color: #666666;
}
.property-meta a:hover .meta-data {
cursor: pointer;
}
.property-meta .meta-title {
display: inline-block;
width: 20px;
font-weight: 700;
}
.property-meta > div {
float: left;
}
.property-meta .meta-data {
display: inline-block;
}
.property-meta .meta-data:hover {
cursor: default;
}
.add-to-favorites:hover {
cursor: pointer;
}
#compare-properties-popup {
display: none;
margin: 30px 0;
padding: 30px 0;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
}
#compare-properties-thumbnails ul {
margin-bottom: 0;
}
#compare-properties-thumbnails li {
float: left;
margin-bottom: 30px;
}
#property-comparison-table .comparison-header {
display: inline-block;
width: 20%;
vertical-align: top;
}
#property-comparison-table .comparison-data {
position: relative;
display: inline-block;
width: 39%;
margin-left: 1%;
vertical-align: top;
}
#property-comparison-table .comparison-data a {
color: inherit;
}
#property-comparison-table .comparison-data.columns-3 {
width: 25.66%;
}
#property-comparison-table .comparison-data.columns-4 {
width: 19%;
}
#property-comparison-table .comparison-data .remove-property-from-comparison {
opacity: 0.75;
position: absolute;
top: 0;
right: 0;
height: 25px;
width: 25px;
line-height: 25px;
font-weight: 700;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
#property-comparison-table .comparison-data .remove-property-from-comparison:hover {
opacity: 1;
cursor: pointer;
}
#property-comparison-table .comparison-data .remove-property-from-comparison::before {
content: "";
}
#property-comparison-table .comparison-main .property-title {
margin-bottom: 0;
}
#property-comparison-table .comparison-main .property-address {
font-size: 0.9em;
color: #999999;
}
#property-comparison-table .comparison-attributes {
margin-top: 30px;
}
#property-comparison-table .comparison-attributes .comparison-row {
font-size: 0.9em;
line-height: 2.5;
border-bottom: 1px solid #eeeeee;
}
#property-comparison-table .comparison-attributes .comparison-header {
font-weight: 700;
}
This is a validated CSS-stylesheet. Hope it fixes this error for you:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/**iPad in landscape**/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad in portrait **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 3 & 4 Media Queries
If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add #2x graphics, or other features for the tablet's Retina display, use the following media queries.
Retina iPad in portrait & landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content, #col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12, .header-margin {
margin-top: 300px;
}
}
/** Retina iPad in landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** Retina iPad in portrait **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt, {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content, #col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12, .header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 Media Queries
If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
iPad 1 & 2 in portrait & landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 in landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 in portrait **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
Okay, first of all you should get rid of every single important rule in your CSS. It is bad to use and is most often not neccessary!
At first sight you should check your CSS for errors. I see a trailing colon after an id and before a bracket
#searchIt, {
/* --- */
}
At https://validator.w3.org/#validate_by_input I get 11 errors and 3 warnings running your code through.
Maybe create a minimal Fiddle, so we can explore your code easier. But I think resolving the errors and warning should do the trick.
Related
I have a div that has the name speech-bubble1 and I want to put a hover element to that, it will expand the scale however, it is not working, I have tried putting other hovering properties and they are working fine, please help me.
I want to scale the speech bubble once I hover over it. Thank you in advance!
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
Because you have given z-index: -1; remove or make it z-index:
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: 1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1:hover {
width: 100%;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
1"
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
and add:
.speech-bubble1:hover {
width: 100%;
}
If you just want scale the "speech bubble" when hover it, you need to :
FIRST = replace translate animation on <div class="text1">
SECOND = place a scale transform on <div class="speech-bubble1">
Like this :
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
}
.speech-bubble1:hover {
width: 584px;
height: 712px;
transform: scale(1.1);
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
I've added a LightBox correctly, but there's something wrong when I click a photo, because there's like a blue border in Google chrome and then another type of border in Internet Explorer that I don't want to see:
https://imgur.com/9dQngUM
How can I remove this?
I've used this lightbox https://lokeshdhakar.com/projects/lightbox2/
Thank you! :D
.lb-loader, .lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10
}
.lb-container > .nav {
left: 0
}
.lb-nav a {
outline: 0;
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-next, .lb-prev {
height: 100%;
cursor: pointer;
display: block
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-prev:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-next:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}
.lb-data .lb-caption a {
color: #4ae
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: alpha(Opacity=100);
opacity: 1
}
Without seeing "the full picture" i.e. your code; you could try this:
.lightbox * { border: none !important; }
This assumes it really is a border problem and not some background image or something of that nature.
I am making a shop for my server, the shop lets me edit only the css, which I am doing, but in the shop there is a giant white space to the right, top and bottom of the screen.
I tried looking for css solutions, non of them worked.
How do I fix this?
WEBSITE: http://purgepvp-mc.tebex.io/?theme=174117
**CSS*:*
#import url(http://fonts.googleapis.com/css?family=Lato;
#import url(http://fonts.googleapis.com/css?family=Futura);
.header {
background-size: cover;
padding: 20px;
margin: 0;
background-image: url("https://i.imgur.com/eFt7yL2.jpg");
}
.progress-bar {
background-color: #592e89
}
body > .container {
width: 100% !important;
padding: 0 !important;
background: #757575;
}
.panel-heading {
border-radius: 0px !important;
border: 0px !important;
height: 40px !important;
background-color: #592e89 !important;
color: #FFF !important;
border-radius: 0px !important;
}
.logo {
}
.panel {
border: none !important;
border-radius: 0px !important;
}
.panel-body {
color: #FFF !important;
border-radius: 0px !important;
background-color: #3a3a3a;
}
.content {
border: none !important;
}
.navbar {
border-radius: 1px;
color: white;
background-color: #592e89;
border: none !important;
}
.donation-goal {
font-weight: bold;
}
.nav {
margin: 0 auto;
text-align: center;
display: block;
width: max-content;
float: initial;'
font-weight: bold;'
}
.nav a, .nav li {
color: #FFF !important;
transition: all 0.2s linear;
text-decoration: none !important;
font-weight: bold;
}
.nav li:hover, .nav li:hover a {
background-color: #3a3a3a;
color: #FFF !important;
text-decoration: none !important;
border-radius: 20px;
font-weight: bold;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.logo img {
content: url('https://i.imgur.com/S7Lfi8X.jpg');
height: initial !important;
width: 600px;
margin: 0 auto;
display: block;
}
.logo {
width: 100% !important;
animation: pulse 3s infinite;
margin: 0 auto;
display: table;
margin-top: 50px;
animation-direction: alternate;
-webkit-animation-name: pulse;
animation-name: pulse;
}
.footer {
border-top: 5px solid #592e89;
background-color: #3a3a3a;
padding-bottom: 30px;
font-weight: bold;
}
Your logo caused this.
Add this css
body .container {
overflow-x: hidden;
}
.container .body {
margin-right:0px;
margin-left:0px;
}
body {
margin-top: 0px !important; /*in your syle.min.css, it makes the margin-top:20px*/
}
There is a margin available by default,
for example
<head>
title scripts etc.
</head>
<body>
<header class="...">your html</header>
<div class="..."></div>
</body>
Either give an id or class to the body and make margin = 0 in the body class or hard code
<body style="margin:0;">
<header class="...">your html</header>
<div class="..."></div>
</body>
This will prevent the white space.
I have polaroid gallery images style. But what I want is when I click the image, it will zoom in or enlarge the image.
I don't know how to achieve it on my else statement. I tried to flipp it when I click the image and it works like this:
.photo.flipped .side-front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.photo.flipped .side-back {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
JavaScript:
item.addEventListener('click', function () {
if ((currentData != dataSize[item.id]) || (currentData == null)) {
select(dataSize[item.id]);
shuffleAll();
} else {
/*Paul Zoom In Photo*/
item.classList.contains('zoomed') === true ? item.classList.remove('zoomed') : item.classList.add('zoomed');
/*END*/
}
});
And this is my CSS:
body {
background-color: #F2EBE2;
}
.fullscreen {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.photo {
position: absolute;
cursor: pointer;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
transition: all 0.6s;
}
.side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: transform 0.6s;
-moz-transition: transform 0.6s;
transition: transform 0.6s;
}
.side-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
display: table;
}
.side-back div {
display: table-cell;
vertical-align: middle;
background-color: rgb(0, 0, 0);
}
.side-back p {
padding: 2px;
color: #d7551d;
font-family: Helvetica, Arial, sans-serif;
}
figure {
width: 150px;
position: absolute;
/* padding: 30px; */
margin: 0 auto;
text-align: center;
background-color: rgb(10, 10, 10);
}
figure img {
height: auto;
max-width: 100%;
margin: 0 auto;
/*margin-bottom: 15px;*/
}
figure img.zoomed{
position: fixed;
top: 5vh;
bottom: 5vh;
left: 5vw;
right: 5vw;
max-width: 90vw;
max-height: 90vh;
margin: auto;
border: 4px solid #000
}
figure figcaption {
font-family: Comic Sans, Comic Sans MS, cursive;
color: #f85a16;
font-size: 10px;
}
.navbar {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
text-align: center;
background-color: black;
z-index: 999;
}
button {
background-color: transparent;
padding: 10px 24px;
color: #ffffff;
border: 2px solid black;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}
button:hover {
background-color: #a00;
color: white;
}
#copyright {
font-family: Consolas, Verdana, Arial, sans-serif;
position: fixed;
color: #ccc;
text-decoration: none;
bottom: 20px;
right: 10px;
}
#copyright:hover {
color: white;
text-decoration: none;
}
#media screen and (max-width: 767px) {
#forkme {
display: none;
}
#copyright {
position: relative;
display: block;
text-align: center;
right: 0px;
bottom: 0px;
}
}
One way, as mentioned, is to use transform: scale(2);
Another easy way is:
document.querySelector('img.sample-image').addEventListener('click', function() {
this.classList.toggle('sample-image-large');
});
.sample-image {
transition:all 1s ease;
width: 100%;
}
.sample-image-large {
width: 200% !important;
}
<img src="http://c.s-microsoft.com/en-us/CMSImages/Explore_ShareBG_0330_1600x560_EN_US.jpg?version=19f9bdc2-cbab-929d-bd00-48f537b9f7e8" class="sample-image">
i am using Magiczoomplus gallery plugin to show image slider in bigger size as popup window. it works great. Now the problem is i want to add html content to popup window. How can i do for this?
Here is Code:
figure.mz-figure {
overflow: hidden;
margin: 0 !important;
-webkit-perspective: 300px;
perspective: 300px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.MagicZoom img,
.mz-figure img {
border: 0 !important;
margin: 0 !important;
outline: 0 !important;
padding: 0 !important;
}
.MagicZoom > img,
.mz-figure > img {
width: 100%;
height: auto;
}
.ie8-magic .MagicZoom > img,
.ie8-magic .mz-figure > img {
width: 100%;
max-width: none !important;
}
.mz-figure.mz-no-zoom.mz-no-expand,
.mz-expand .mz-figure.mz-no-zoom {
cursor: pointer;
}
.mz-figure.mz-active,
.mz-expand {
-ms-touch-action: none;
touch-action: none;
}
.mz-lens,
.mz-zoom-window {
position: absolute !important;
overflow: hidden !important;
pointer-events: none !important;
}
.mz-lens img,
.mz-zoom-window img {
position: absolute !important;
max-width: none !important;
max-height: none !important;
}
.mz-lens img {
-webkit-transition: none !important;
transition: none !important;
}
.mz-zoom-window {
z-index: 2000000000;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.mz-zoom-window.mz-magnifier {
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-webkit-mask-clip: content;
cursor:pointer;
}
.mz-figure.mz-active .mz-zoom-window.mz-magnifier {
pointer-events: auto !important;
cursor: pointer !important;
}
.mz-zoom-window.mz-magnifier.mz-expanded {
z-index: 2147483647;
}
.mz-zoom-window img {
width: auto;
height: auto;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto !important;
-webkit-transition: none;
transition: none;
-webkit-transform-origin: 50% 50% !important;
-ms-transform-origin: 50% 50% !important;
transform-origin: 50% 50% !important;
}
.mz-zoom-window.mz-preview img {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
width: 100% !important;
height: auto !important;
-webkit-transform: none !important;
transform: none !important;
}
.lt-ie9-magic .mz-zoom-window img {
margin: 0 !important;
}
.mz-expand-controls {
z-index: 2147483647;
}
.mz-fade {
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.mz-hidden {
opacity: 0;
}
.mz-visible {
opacity: 1;
}
.mobile-magic .mz-expand .mz-expand-bg {
-webkit-transform-style: flat !important;
transform-style: flat !important;
}
.mobile-magic .mz-expand .mz-image-stage > figure .mz-caption {
display: none !important;
}
.mobile-magic .mz-expand-controls.mz-fade {
transition: none !important;
}
.mobile-magic .mz-expand > .mz-zoom-window {
top: 0 !important;
left: 0 !important;
}
.mz-expanded-view-open,
.mz-expanded-view-open body {
overflow: hidden !important;
}
.mz-expanded-view-open body { height: auto !important; }
/**
* Main figure
*/
.mz-figure.mz-active {
display:none !important;
}
.mz-figure.mz-no-zoom,
.mz-figure.mz-click-zoom,
.mz-figure.mz-active {
cursor: pointer;
}
.mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand {
cursor: pointer;
}
.mz-figure.mz-magnifier-zoom.mz-active {
overflow: visible !important;
}
.mz-zoom-window {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
.mz-zoom-window.mz-magnifier {
border-radius: 100%;
border: 0;
background: rgba(255,255,255,.3);
}
.mz-zoom-window.mz-magnifier:before {
content: "";
display: block;
position: absolute;
top: 0;bottom: 0;
left: 0; right: 0;
border-radius: 100%;
border: 1px solid rgba(170,170,170,0.7);
box-shadow: inset 0 0 20px 1px rgba(0,0,0,.3);
background: transparent;
z-index: 1;
}
.mz-zoom-window.mz-magnifier.mz-square,
.mz-zoom-window.mz-magnifier.mz-square:before {
border-radius: 0 !important;
}
.lt-ie9-magic .mz-zoom-window {
border: 1px solid #e5e5e5;
}
.mz-zoom-window.mz-inner {
border: none;
box-shadow: none;
}
/* Caption in zoom window */
.mz-zoom-window .mz-caption {
background: #777;
color: #fff;
font-size: 10pt;
opacity: 0.8;
position: absolute;
top: 0;
z-index: 150;
padding: 3px;
width: 100%;
line-height: normal !important;
text-align: center !important;
}
.lt-ie9-magic .mz-zoom-window .mz-caption {
filter: alpha(opacity=80);
}
.mz-zoom-window.caption-bottom .mz-caption {
top: auto;
bottom: 0;
}
.mz-zoom-window.mz-expanded > .mz-caption {
display: none;
}
/* Zoom window animations */
.mz-zoom-window.mz-deactivating,
.mz-zoom-window.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-deactivating {
-webkit-transition-duration: .25s, .25s, .25s;
transition-duration: .25s, .25s, .25s;
}
.mz-zoom-window.mz-p-right,
.mz-zoom-window.mz-p-left,
.mz-zoom-window.mz-p-top,
.mz-zoom-window.mz-p-bottom {
opacity: 0;
z-index: -100;
}
.mz-zoom-window.mz-p-right {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mz-zoom-window.mz-p-left {
-webkit-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0);
}
.mz-zoom-window.mz-p-top {
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}
.mz-zoom-window.mz-p-bottom {
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
/* Inner mode animation */
.mz-zoom-window > img {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-zoom-window.mz-p-inner.mz-deactivating > img,
.mz-zoom-window.mz-p-inner.mz-activating > img {
-webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
/* Magnifier mode animation */
.mz-zoom-window.mz-p-magnifier {
-webkit-transform: scale(.1);
transform: scale(.1);
}
/* Preview mode animation */
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-preview.mz-activating,
.mz-zoom-window.mz-custom.mz-deactivating,
.mz-zoom-window.mz-custom.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-custom.mz-deactivating {
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.mz-zoom-window.mz-p-preview,
.mz-zoom-window.mz-p-custom {
opacity: 0;
}
/**
* Hint & Loading
*/
.mz-hint,
.mz-loading {
color: #eee;
background: red;
font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
direction: ltr;
display: inline-block;
margin: 0;
position: absolute;
z-index: 1000;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.mobile-magic .mz-hint-message:before {
display: none;
}
.mz-hint-hidden {
opacity: 0;
z-index: -1;
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
/* Hint in the expanded view on mobile */
.mz-expand .mz-hint {
font-size: 18px;
line-height: 1.1em;
top: 50%;
bottom: auto;
margin: 0;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.mz-expand .mz-hint-message {
padding: 1.1em;
}
.mz-expand .mz-hint-message:before {
display: none;
}
.mz-expand .mz-hint-hidden {
-webkit-transition-delay: 1s;
transition-delay: 1s;
opacity: 0;
}
/* Loading indicator */
.mz-loading {
font-size: 0;
border-radius: 100%;
opacity: 0;
padding: 0;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mz-loading:after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 24px;
height: 24px;
margin: auto;
text-indent: -9999em;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 1);
border-top-color: transparent;
box-sizing: border-box;
}
.mz-loading.shown {
opacity: 1;
z-index: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.mz-loading.shown:after {
-webkit-animation: spin-loading .9s infinite linear;
animation: spin-loading .9s infinite linear;
}
#-webkit-keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.lt-ie10-magic .mz-loading {
font-size: 12px;
padding: .7em 1.1em;
width: auto;
height: auto;
}
.lt-ie10-magic .mz-loading:after {
content: 'Loading...';
text-indent: 0;
border: none;
position: relative;
}
.lt-ie9-magic .mz-loading {
filter: alpha(opacity=0);
right: 0;
left: 0;
width: 126px;
margin: auto;
}
.lt-ie9-magic .mz-hint-message,
.lt-ie9-magic .mz-loading.shown {
background: transparent !important;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D', EndColorStr='#7c31333D');
}
.lt-ie9-magic .mz-hint-hidden {
filter: alpha(opacity=0);
}
/**
* Expanded view
*/
.mz-expand,
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg,
.mz-expand .mz-expand-stage,
.mz-expand .mz-expand-stage .mz-image-stage {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg {
width: auto !important;
height: auto !important;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > svg {
min-width: 100% !important;
min-height: 100% !important;
}
.mz-expand {
background-color: rgba(0, 0, 0, 1);
text-align: center;
vertical-align: middle;
display: block;
overflow: hidden;
z-index: 2100000000;
position: fixed;
width: auto;
height: auto;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-overflow-style: none;
}
/* Expanded view background */
.mz-expand .mz-expand-bg {
display: inline-block;
vertical-align: middle;
margin: auto;
z-index: -100;
max-width: none !important;
max-height: none !important;
-webkit-transform: translate3d(0,0,0) scale(10) rotate(0.01deg);
-ms-transform: translate(0,0) scale(10,10) rotate(0.01deg);
transform: translate3d(0,0,0) scale(10) rotate(0.01deg);
-webkit-perspective: 600px;
perspective: 600px;
background-repeat: no-repeat;
background-size: cover;
}
.mz-expand .mz-expand-bg > img {
margin: auto;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'80\' in=\'SourceGraphic\'></feGaussianBlur></filter></svg>#blur");
-webkit-filter: blur(20px) brightness(60%);
filter: blur(20px) brightness(60%);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-bg > svg {
margin: auto;
opacity: .6;
}
[data-magic-ua=edge] .mz-expand .mz-expand-bg,
.lt-ie10-magic .mz-expand .mz-expand-bg {
display: none !important;
}
.lt-ie9-magic .mz-expand {
background: #1f1f1f;
}
[data-magic-ua=edge] .mz-expand {
background-color: rgba(31, 31, 31, .96);
}
/** Plain backgrounds: dark-bg, white-bg **/
.mz-expand.plain-bg .mz-expand-bg,
.mz-expand.dark-bg .mz-expand-bg,
.mz-expand.white-bg .mz-expand-bg {
display: none !important;
}
.mz-expand.dark-bg {
background-color: #1f1f1f;
background-color: rgba(31, 31, 31, .96);
}
.mz-expand.white-bg {
background-color: #fff;
}
/* Expanded view stage */
.mz-expand .mz-expand-stage {
z-index: 2100000000;
padding: 0;
}
.mz-expand .mz-expand-stage .mz-image-stage {
z-index: 50;
left: 120px;
right: 120px;
padding: 20px 0 40px 0;
margin: 0;
text-align: center;
vertical-align: middle;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding-bottom: 120px;
}
.mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding: 0 !important;
left: 0;
right: 0;
}
.mz-expand .mz-image-stage > figure:before,
.mz-expand .mz-image-stage:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
font-size: 0;
line-height: 100%;
width: 0;
}
.mz-expand .mz-image-stage > figure {
width: 100%;
max-width: 100%;
max-height: 100%;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 100%;
position: relative;
}
.mz-expand .mz-figure {
overflow: visible;
max-width: 100% !important;
}
.mz-expand .mz-figure > img {
max-width: 100%;
width: auto;
height: auto;
}
.mz-expand .mz-zoom-in .mz-image-stage > figure,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-activating,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active {
width: 100%;
height: 100%;
}
.mz-expand .mz-figure {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
/* When inner zoom is always shown */
.mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage > figure > figure > img {
z-index: 1;
position: absolute !important;
top: -5000px !important;
bottom: -5000px !important;
left: -5000px !important;
right: -5000px !important;
margin: auto !important;
}
.lt-ie10-magic .mz-zoom-window.mz-expanded img { filter: alpha(opacity=100); }
.lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom {
overflow: hidden;
filter: alpha(opacity=100);
}
/* Caption in expanded view */
.mz-expand .mz-caption {
color: #fff;
text-shadow: 0px 0px 46px #000;
padding: 10px 4px;
font: normal 10pt/1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-align: center;
width: 100%;
position: absolute;
left: 0;
opacity: 0;
}
.mz-expand .mz-caption.mz-show {
-webkit-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
opacity: 1;
}
.mz-expand .mz-caption a {
color: inherit;
cursor: pointer;
}
.mz-expand.white-bg .mz-caption {
color: #555;
text-shadow: none;
}
.lt-ie9-magic .mz-expand .mz-caption {
top: 100%;
}
.mz-expand .mz-zoom-window {
box-shadow: none;
background: transparent;
}
.lt-ie9-magic .mz-expand .mz-zoom-window {
border: 0;
}
/* Expanded view on mobile */
.mobile-magic .mz-expand-stage .mz-expand-thumbnails,
.mobile-magic .mz-expand-stage .mz-image-stage {
left: 0px;
right: 0px;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs {
bottom: 0px;
}
.mobile-magic .mz-expand-stage .mz-image-stage {
padding: 0;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding: 5px 0 60px;
}
.mobile-magic .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding-top: 0;
}
.mobile-magic .mz-expand .mz-expand-thumbnails {
padding: 0;
height: 60px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://cms.seller.ir/js/magiczoomplus.js"></script>
</head>
<body>
<ul>
<li><!-- Begin magiczoomplus -->
<a id="MagicZoomPlusImage177" class="MagicZoom" title="This is popup Window" data-zoom-image="http://jj-bg.info/gallery/album_1/min/test.png" data-options="zoomPosition:left;rightClick:true;cssClass:white-bg;" >
<img itemprop="image" src="http://jj-bg.info/gallery/album_1/min/test.png" srcset="images/pic5.png 2x" />
</a>
</li>
</ul>
</body>
</html>
Personally I don't see the point of using text in this plugin, but I guess you have ideas about it. I see the plugin has hint settings, which shows text - you can try duplicate CSS and JavaScript from this setting.