CSS IMAGE ANIMATION -ON CLICK POP UP | The Big Data - Business Intelligence by Sandeep Venu

Enter key word

CSS IMAGE ANIMATION -ON CLICK POP UP








<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
 
   
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {   
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {

    top: 200px;
    right: 100px;
left: 500px;
    color: #000000;
    font-size: 200px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>


<img id="myImg" src="http://i64.tinypic.com/207145l.jpg" alt="US Regions" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');


var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}


var span = document.getElementsByClassName("close")[0];


span.onclick = function() {
    modal.style.display = "none";
}
</script>

</body>
</html>


SHARE

About Unknown

    Blogger Comment
    Facebook Comment

0 comments:

Top Links

Upgrading BI Publisher

Add Google Search

OBIEE- LDAP

Change Admin Password

Best Practices

ORACLE 11GR2

Host Files

Customization

OBIEE-SIEBEL

Bug Fixes

Setting Default

OBIEE Installation failed

OBIEE Installation

Oracle Databse

Oracle In Linux

Loopback Adapter

Weblogic Failed

Yum Commands

Weblogic Admin

Linux Static IP

OBIEE LDAP

Admin Paswword

Scaling

Weblogic Starting Error

Localizing BI

Physical Schemas

Multimedia Dashboard

Video in OBIEE

Variables in OBIEE

Ago 30 Days

Email Link

ODI Installation

AGO Function

Sort Pivote table

OBIEE Patch

Reset Sys password

Date Calculation

Add Row in Report

Increase Row limit

OBIEE with Essbase

Reset Weblogic

BIP Login Error

MDS and BI Platform

ORA 28001 Error

ORA 12560 TNS Protocal Error

ORA 12154 TNS Error

OBIEE ON AIX

Pre Requsite

AIX Commands

Commands