Nicepage 3.27: October 6, 2021 - Hover Animation Effects. Quick Access Media Panel

<!DOCTYPE html> <html lang="en"> <head> <title>Nicepage 3.27: October 6, 2021 - Hover Animation Effects. Quick Access Media Panel - Nicepage Help Center</title> <link rel="shortcut icon" href="//csite.nicepage.com/favicon.ico" type="image/x-icon"> <meta charset="utf-8" /> <meta name="Keywords" content=" "> <meta name="Description" content="Animation is the key interaction feature of any modern website. Therefore, we improved effects for the Icon, Shape, Image, and Text Elements. "> <meta property="og:type" content="article"> <meta property="og:url" content="https://nicepage.com/doc/192635/hover-animation-effects"> <meta property="og:title" content="Nicepage 3.27: October 6, 2021 - Hover Animation Effects. Quick Access Media Panel - Nicepage Help Center"> <meta property="og:image" content="https://resources.nicepage.com/804/57804/new-designs-327.jpg"> <meta property="og:description" content="Animation is the key interaction feature of any modern website. Therefore, we improved effects for the Icon, Shape, Image, and Text Elements. "> <meta property="og:site_name" content="Nicepage.com" /> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width"> <script src="//capp.nicepage.com/f74afc15ee900f305dc1888cdb5d3d4414130a95/main-libs.js" ></script> <link href="//capp.nicepage.com/f74afc15ee900f305dc1888cdb5d3d4414130a95/main-libs.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:200,300,400,700,800,900&subset=latin" rel="preload" as="font" /> <script> window.isAuthenticated = 0; window.useExternalGtmCode = 0; window.clientUserId = 0; window.clientUserName = ''; window.userCountryCode = ''; window.logPageEvent = 1; window.userHasAdsParams = 0; window.utmSourceFromReferrer = 0; window.currentLang = ''; window.baseUrl = 'html-templates'; window.currentUrl = ''; window.np_userId = ''; window.isAmplitudeInitialized = false; window.sha256Email = ''; function getCookieOrLocalStorage(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) { return c.substring(nameEQ.length, c.length); } } var lsValue = localStorage.getItem(name); return !!lsValue; } function sendAnalyticsData(eventType, props, cb) { var json = { data: {} }; json.userToken = np_userId; json.data.adsParams = $.cookie('AdsParameters'); json.data.ga = $.cookie('_ga'); json.data.gac = $.cookie('_gac_UA-88868916-2'); json.data.userAgent = navigator.userAgent; json.data.eventType = eventType; json.data.props = props; $.ajax({ 'type': 'POST', 'url': '/Feedback/SendAdsLog', 'contentType': 'application/json; charset=utf-8', 'data': JSON.stringify(json), 'dataType': 'json', 'complete': cb || function() {} }); } function initializeAmplitudeUser() { if (isAmplitudeInitialized) { return; } isAmplitudeInitialized = true; if (clientUserId > 0) { identifyAmplitudeUser(clientUserId, clientUserName); } else { identifyAmplitudeUser(null); } } function sendAmplitudeAnalyticsData(eventName, eventProperties, userProperties, callback_function) { initializeAmplitudeUser(); if (userProperties) { if(userProperties.utm_source || userProperties.utm_campaign) { var identify = new amplitude.Identify(); identify.setOnce("utm_campaign", userProperties.utm_campaign); identify.setOnce("utm_source", userProperties.utm_source); identify.setOnce("utm_content", userProperties.utm_content); identify.setOnce("utm_group", userProperties.utm_group); identify.setOnce("utm_term", userProperties.utm_term); identify.setOnce("utm_page", userProperties.utm_page); identify.setOnce("utm_page2", userProperties.utm_page); identify.setOnce("referrer", userProperties.referrer); amplitude.getInstance().identify(identify); userProperties.utm_source_last = userProperties.utm_source; userProperties.utm_campaign_last = userProperties.utm_campaign; userProperties.utm_content_last = userProperties.utm_content; userProperties.utm_group_last = userProperties.utm_group; userProperties.utm_term_last = userProperties.utm_term; userProperties.utm_page_last = userProperties.utm_page; } var userProps = objectWithoutProperties(userProperties, ["utm_campaign", "utm_source","utm_content", "utm_term", "utm_page", "utm_group", "referrer"]); amplitude.getInstance().setUserProperties(userProps); } if (!eventProperties) { eventProperties = {}; } eventProperties.WebSite = 'true'; eventProperties.IsAuthenticated = window.isAuthenticated; eventProperties.country_code = getCountryCode(); eventProperties.lang = window.currentLang || ''; var fullPageUrl = window.location.pathname.split('?')[0]; eventProperties.full_page_url = fullPageUrl; eventProperties.page_url = clearPageUrl(fullPageUrl); if (typeof callback_function === 'function') { amplitude.getInstance().logEvent(eventName, eventProperties, callback_function); } else { amplitude.getInstance().logEvent(eventName, eventProperties); } } function identifyAmplitudeUser(userId, token) { if (userId) { amplitude.getInstance().setUserProperties({ "Token": token, "UserId": userId }); } var identify = new amplitude.Identify(); amplitude.getInstance().identify(identify); if (userId) { amplitude.getInstance().setUserId(userId); } } function getUtmParamsFromUrl() { var hash = window.location.hash; var url = new URL(window.location.href); if (hash && hash.indexOf('utm_') >= 0) { url = new URL(window.location.origin + window.location.pathname + hash.replace('#', '?')); } if (!url.searchParams) { return ''; } return getUtmParams(url); } function hasGoogleIdFromUrl() { var url = new URL(window.location.href); if (!url.searchParams) { return false; } return !!url.searchParams.get('gclid'); } function sendAnalyticsFromUrl(referrer, pageType) { var urlIsAvailable = typeof URL === "function" || (navigator.userAgent.indexOf('MSIE') !== -1 && typeof URL === 'object'); if (!urlIsAvailable) { return; } var utmParams = getUtmParamsFromUrl(); if (!utmParams) { return; } var gclidFromUrl = utmParams.gclid; var utmParamsFromUrl = !!utmParams.utmSource || !!utmParams.utmCampaign || !!utmParams.gclid; if (!utmParamsFromUrl && userHasAdsParams) { utmParams = getUtmParamsFromCookie(); } var canLog = canLogToAmplitude(pageType); if (utmParamsFromUrl || utmSourceFromReferrer) { var fullPageUrl = window.location.pathname.split('?')[0]; var pageUrl = clearPageUrl(fullPageUrl); var userProps = { "utm_source": utmParams.utmSource, "utm_campaign": utmParams.utmCampaign, "utm_content": utmParams.utmContent, "utm_group": utmParams.utmGroup, "utm_term": utmParams.utmTerm, "utm_page": getUtmPageValue(pageUrl), "utm_lang": window.currentLang || '', "referrer": referrer }; if (gclidFromUrl) { var landingUrl = pageUrl.startsWith('/') && pageUrl !== '/' ? pageUrl.substr(1) : pageUrl; userProps.landing_page = landingUrl; var event = { 'Page': landingUrl, 'Url': window.location.href, 'utm_campaign_event': utmParams.utmCampaign, 'utm_group_event': utmParams.utmGroup } sendAmplitudeAnalyticsData('Landing Page', event, userProps); } else { var eventProps = { "utm_source": utmParams.utmSource, "utm_campaign": utmParams.utmCampaign, "utm_content": utmParams.utmContent, "utm_group": utmParams.utmGroup, "utm_term": utmParams.utmTerm }; if (utmParams.utmSource === "elastic") { sendAmplitudeAnalyticsData('Email Click', eventProps); } if (canLog) { sendAmplitudeAnalyticsData('Campaign', eventProps, userProps); } } } if (logPageEvent && canLog || (pageType === 'Pricing Page' && window.isValidCountry(true))) { var pageEventProps = { 'type': pageType, 'accepted_country': isValidCountry(), 'force_log': !canLog }; if (utmParams.gclid) { pageEventProps.googleClickId = utmParams.gclid; } sendAmplitudeAnalyticsData('Page View', pageEventProps); } } document.addEventListener('DOMContentLoaded', function () { if (location.href.indexOf('/frame/') === -1 && window.location.href.indexOf('skipCookie') === -1) { PureCookie.initCookieConsent(); } setCountryCode('https://location.nicepagesrv.com/country'); setUserIdCookie(); var referrer = ''; var pageType = 'Doc Article'; sendAnalyticsFromUrl(referrer, pageType); }); </script> <script> // Define dataLayer and the gtag function. window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } var consentDefaultValue = 'granted'; gtag('consent', 'default', { 'ad_storage': consentDefaultValue, 'ad_user_data': consentDefaultValue, 'ad_personalization': consentDefaultValue, 'analytics_storage': consentDefaultValue }); if (hasGoogleIdFromUrl()) { useExternalGtmCode = 1; } </script>  <script> if (useExternalGtmCode) { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://load.api9.nicepage.com/nldlswob.js?st='+i+dl+'';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','W76XGFR'); } else { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-W76XGFR'); } </script>   <script> if(window.hideFacebookPixelCode !== true) { !function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); var fbInitOptions = { em: '' }; if (clientUserId > 0) { fbInitOptions.external_id = clientUserId; } fbq('init', '251025992170426', fbInitOptions); fbq('track', 'PageView'); } </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=251025992170426&ev=PageView&noscript=1" /></noscript>   <script type="text/javascript"> (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script") ;r.type="text/javascript" ;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW" ;r.crossOrigin="anonymous";r.async=true ;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js" ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){ console.log("[Amplitude] Error: could not load SDK")}} ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i) ;function s(e,t){e.prototype[t]=function(){ this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}} var o=function(){this._q=[];return this} ;var a=["add","append","clearAll","prepend","set","setOnce","unset"] ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[] ;return this} ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"] ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"] ;function v(e){function t(t){e[t]=function(){ e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}} for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){ e=(!e||e.length===0?"$default_instance":e).toLowerCase() ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]} ;e.amplitude=n})(window,document); amplitude.getInstance().init("878f4709123a5451aff838c1f870b849"); </script> <script> var shareasaleSSCID=shareasaleGetParameterByName("sscid");function shareasaleSetCookie(e,a,r,s,t){if(e&&a){var o,n=s?"; path="+s:"",i=t?"; domain="+t:"",S="";r&&((o=new Date).setTime(o.getTime()+r),S="; expires="+o.toUTCString()),document.cookie=e+"="+a+S+n+i+"; SameSite=None;Secure"}}function shareasaleGetParameterByName(e,a){a||(a=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var r=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)").exec(a);return r?r[2]?decodeURIComponent(r[2].replace(/\+/g," ")):"":null}shareasaleSSCID&&shareasaleSetCookie("shareasaleSSCID",shareasaleSSCID,94670778e4,"/"); </script> <link rel="preconnect" href="https://images01.nicepagecdn.com" /> <link rel="preconnect" href="https://csite.nicepage.com" />  <script> window.serverSettings = { fbAppId: '290410448063109', googleAppId: '13150095650-mo8psu2colep6uv90a2mu6r87u87s35a.apps.googleusercontent.com' }; </script> <script src="https://accounts.google.com/gsi/client?hl=en" async></script> <script src="//csite.nicepage.com/Scripts/Site/auth-common.js?version=f74afc15ee900f305dc1888cdb5d3d4414130a95" defer></script> <script> var T = new Object(); T['Post.Delete'] = 'Delete'; T['Loading'] = 'Loading'; T['Attachment.File.Limit.Error'] = 'You can attach only 5 files'; T['Attachment.General.Error'] = 'There is an error with the file or the file size exceeds the allowed limit (20MB). Try putting the file in a shared location and sending a link instead.'; T['Attachment.Insert'] = 'Insert Attachment'; T['Report.Spam.Success'] = 'Thank you for Report!'; </script> <link rel="canonical" href="https://nicepage.com/doc/192635/hover-animation-effects" /> <style> @media (min-width: 1400px) { .container { width: 1370px; } } .col-sticky { position: sticky; top: 10px; } .col-widgets { max-height: calc(100vh - 50px); overflow-x: hidden; overflow-y: auto; } </style> <script> function getAcnhor() { return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null; } function updateWaypoints() { var list = document.querySelector('.doc-waypoint-list'); if (!list) { return; } var items = list.querySelectorAll('.doc-waypoint-item'); if (!items.length) { return; } var i, active = 0; var scroller = document.documentElement; var height = scroller.clientHeight; var isScrollEnd = Math.abs(scroller.scrollTop + scroller.clientHeight - scroller.scrollHeight) < 1; var top = 30; // heading top offest var viewHeight = height * 0.5; // find visible anchor in viewport for (i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } var rect = heading.getBoundingClientRect(); if (!rect) { continue; } if (rect.top < -top) { // scrolled under top active = i; // or last scrolled } else if (rect.top + rect.height < viewHeight) { // in the upper half active = i; break; } } // check active anchor visible in viewport var anchor = getAcnhor(); if (anchor) { for (i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id || id !== anchor) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } var rect = heading.getBoundingClientRect(); if (!rect) { continue; } if (rect.top >= -top && (rect.top + rect.height < viewHeight || isScrollEnd)) { // is visible in the upper half active = i; } break; } } // set active item for (i = 0; i < items.length; i++) { var item = items[i]; if (i === active) { if (!item.classList.contains('active')) { item.classList.add('active'); } } else { if (item.classList.contains('active')) { item.classList.remove('active'); } } } } var ticking; function onScroll() { if (!ticking) { window.requestAnimationFrame(function () { updateWaypoints(); ticking = false; }); ticking = true; } } function onClick(event) { if (event && event.target && event.target.closest('.doc-waypoint-item')) { onScroll(); // updateWaypoints(); } } function scrollToAnchorWaypoint() { var anchor = getAcnhor(); if (!anchor) { return; } var list = document.querySelector('.doc-waypoint-list'); if (!list) { return; } var items = list.querySelectorAll('.doc-waypoint-item'); if (!items.length) { return; } for (var i = 0; i < items.length; i++) { var item = items[i]; var id = item.getAttribute('data-id'); if (!id || id !== anchor) { continue; } var heading = document.getElementById(id); if (!heading) { continue; } heading.scrollIntoView({behavior: 'smooth', block: 'start'}); break; } } // try to disable default browser scroll position restore history.scrollRestoration = 'manual'; //try #1 (all browser, exclude IE11) document.documentElement.scrollTop = 0; // try #2 (all browser) document.addEventListener("DOMContentLoaded", function initWaypoints() { setTimeout(function () { // skip default scroll restoration, if triggered scrollToAnchorWaypoint(); setTimeout(function () { // skip scroll to anchor document.addEventListener('scroll', onScroll); document.addEventListener('click', onClick); // May be navigate without scroll onScroll(); // updateWaypoints(); }, 500); }, 250); }); </script> <script src="//capp.nicepage.com/f74afc15ee900f305dc1888cdb5d3d4414130a95/forum-main-libs.js" defer></script> <link href="//capp.nicepage.com/f74afc15ee900f305dc1888cdb5d3d4414130a95/forum-main-libs.css" rel="stylesheet" />  <!— Pinterest Tag —>  <!— end Pinterest Tag —> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { if (typeof IOlazy === 'function') { var lazy = new IOlazy(); } }); </script> </head> <body>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W76XGFR" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>  <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0&appId=290410448063109" nonce="zGb432eF"></script> <div class="wrap wrap-fluid"> <div id="top-navbar" class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand clearfix" href="https://nicepage.com"><img class="pull-left" width="123" height="40" alt="Nicepage.com" src="//csite.nicepage.com/Images/logo-w.png" /></a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="logon-block nav navbar-nav nav-list navbar-left u-unstyled" style="font-size: 14px;"> <li class="dropdown"> <a href="/download">Download</a> </li> <li class="dropdown"> <a href="/features">400+ Features</a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle template-menu-item" href="/html-templates">15,000+ Templates <span class="caret"></span></a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a href="/website-templates" class="templates-url" data-urls="website-templates;templates">Website Templates</a></li> <li><a href="/website-design" class="templates-url">Website Designs</a></li> <li><a href="/wordpress-themes">WordPress Themes</a></li> <li><a href="/joomla-templates">Joomla Templates</a></li> <li><a href="/html-templates" class="templates-url" data-urls="html-templates;html5-template;css-templates">HTML Templates</a></li> </ul> </a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"> Website Builders <span class="caret"></span> </a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a class="builder-link" href="/html-website-builder">HTML Website Builder</a></li> <li><a class="builder-link" href="/wordpress-website-builder">WordPress Website Builder</a></li> <li><a class="builder-link" href="/joomla-page-builder">Joomla Page Builder</a></li> </ul> </li> <li class="dropdown"> <a href="/premium">Pricing</a> </li> <li><a href="/forum">Forums</a></li> <li class="dropdown"> <a href="/blog">Blog</a> </li> <li class="dropdown"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Help<span class="caret"></span></a> <ul role="menu" class="dropdown-menu dropdown-menu-hover u-unstyled"> <li><a href="/doc/1318/video-lessons">Video Tutorials</a></li> <li><a href="/doc">Documentation</a></li> <li><a href="/Forum/Topic/Create">Contact Support</a></li> </ul> </li> </ul> <ul class="logon-block nav navbar-nav nav-list navbar-right u-unstyled"> <li><a href="/Editor/Account/LogOn">Sign In</a></li><li class="divider-vertical"></li><li><a href="https://nicepage.com/Editor/Account/Register">Register</a></li><li class="divider-vertical"></li> </ul> </div> </div> </div> <section id="" class="container"> <div id="jsquickmessage" style="display:none;"></div> <article class="article-containter"> <div class="row"> <div class="col-md-8"> <ol class="breadcrumb"> <li><a href="/doc">Home</a></li> <li><a href="/doc/c/release-notes">Release Notes</a></li> <li class="active">Nicepage 3.27: October 6, 2021 - Hover Animation Effects. Quick Access Media Panel</li> </ol> </div> <div class="col-md-4"> <div style="margin-top: 10px;" > <a class="youtube-subscribe-btn" href="//youtube.com/c/nicepage?sub_confirmation=1" target="_blank"> <img src="//csite.nicepage.com/Images/Site/subscribe.png" alt="Subscribe on Youtube" style="width: 135px; vertical-align: bottom; margin-right: 5px;" /> </a> <div style="display: inline-block;"> <div class="fb-like" data-href="https://www.facebook.com/nicepageapp" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-12"> <h1> Nicepage 3.27: October 6, 2021 - Hover Animation Effects. Quick Access Media Panel </h1> </div> </div> <div class="row"> <div class="col-md-12"> <div class="postbody"> <div id="postcontent-192635" class="postcontent"> <h2 id="whats-new-in-this-update">What's New in This Update?</h2> <ul> <li>Hover Animation Effects (Beta)<br /> <ul><li>Color On Hover</li><li>Border On Hover</li><li>Radius On Hover</li><li>Shadow On Hover</li><li>Transparency On Hover</li><li>Hover Duration</li></ul></li> <li>Quick Access Media Panel<br /> <ul><li>Add Images</li><li>Search Images</li><li>Insert Images to Page</li></ul></li> <li>Joomla 4 Extension Updated<br /> <ul><li>Plugin Installation Wizard</li><li>Import Content From Desktop</li><li>Menu Editor</li><li>Position Output</li><li>Edit Link Dialog</li></ul></li> <li>New Block and Page Designs</li> </ul> <h2 id="hover-animation-beta">Hover Animation (Beta)</h2> <p>Animation is the key interaction feature of any modern website. Therefore, we improved effects for the Icon, Shape, Image, and Text Elements. </p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/871/57871/hover-animation.gif" alt="hover-animation.gif" /></div> <p>In future updates, we plan to add the hover effects for containers like the Group, Grid, and Grid Repeater Cells.</p> <h2 id="hover-properties">Hover Properties</h2> <p>The following example shows the Hover Animation applied to the Border, Radius, Shadow, and Transparency properties of the Image Element.</p> <p>Depending on the Element you can set the following properties on hover:</p> <ul> <li>Duration</li> <li>Color</li> <li>Background </li> <li>Border</li> <li>Radius</li> <li>Shadow</li> <li>Transparency</li> </ul> <h2 id=""></h2> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/939/57939/image-hover-properties.png" alt="image-hover-properties.png" /></div> <h3>How To Change The Color on Hover</h3> <p>For example, you can change the Shape Color on hover.</p> <ol> <li>Select the added Shape Element and go to the Property Panel to the right.</li> <li>Select the Hover Animation checkbox.</li> <li>Choose the Hover Tab.</li> <li>Change the Color to be applied on hover.</li> <li>Click somewhere in the Block to unselect the Shape.</li> <li>Hover the Shape to test the Color Change.</li> </ol> <h2 id=""></h2> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/954/57954/hover-color.gif" alt="hover-color.gif" /></div> <h3>Border on Hover</h3> <p>You can also change the Hover Border.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/957/57957/hover-border.gif" alt="hover-border.gif" /></div> <h3>Radius on Hover</h3> <p>For Images and Shapes, you can specify the Radius on Hover.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/959/57959/hover-radius.gif" alt="hover-radius.gif" /></div> <h3>Shadow on Hover</h3> <p>The Shadow also can be altered on hover.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/960/57960/hover-shadow.gif" alt="hover-shadow.gif" /></div> <h3>Transparency on Hover</h3> <p>You can also add interaction with Transparency on Hover.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/961/57961/hover-transparency.gif" alt="hover-transparency.gif" /></div> <h3>How To Change Hover Duration</h3> <p>The Duration specifies the time of transition from the default to the hover state.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/952/57952/hover-duration.gif" alt="hover-duration.gif" /></div> <h2 id="media-panel">Media Panel</h2> <p>Images are vital for any website, and it is also essential to easily access them while designing a web page. We have added the Quick Access Media Panel to add, remove, and insert images to block more conveniently.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/887/57887/media-panel.png" alt="media-panel.png" /></div> <h3>Add Images</h3> <p>You can Add Images by clicking the Plus icon and selecting images in the Open dialog. </p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/962/57962/media-panel-add-images.png" alt="media-panel-add-images.png" /></div> <p>You can also drag images from your desktop or local folder.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/891/57891/media-panel-drag-images.png" alt="media-panel-drag-images.png" /></div> <h3>Search Images By Name</h3> <p>You can search images by typing the letters of their file names in the search box.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/892/57892/media-panel-search-image.png" alt="media-panel-search-image.png" /></div> <h2 id="insert-images-to-page">Insert Images to Page</h2> <p>To add an image from the Quick Access Media Panel to a Block, click or drag it in the Panel.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/966/57966/media-panel-insert-image.gif" alt="media-panel-insert-image.gif" /></div> <h2 id="joomla-4-extension-beta-updated">Joomla 4 Extension (Beta) Updated</h2> <p>Since the Joomla 4 has gained more popularity, we are continuing to improve its support. In this update, we have improved the Nicepage Joomla 4 Extension by implementing the following features.</p> <ul> <li>Plugin Installation Wizard</li> <li>Import Content From Desktop</li> <li>Menu Editor</li> <li>Position Output</li> <li>Edit Link Dialog</li> </ul> <p>Please note that to get the Joomla 4 Extension, you have to export it from the desktop applications for Windows or Mac OS.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/894/57894/joomla-4-extension-export.png" alt="joomla-4-extension-export.png" /></div> <h3>Plugin Installation Wizard</h3> <p>We have improved the installation wizard for the Nicepage Joomla 4 Extension.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/934/57934/joomla-4-installation-wizard.png" alt="joomla-4-installation-wizard.png" /></div> <h3>Import Content From Desktop</h3> <p>Now, you can import the content exported from the Desktop Applications.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/933/57933/import-content-from-desltop.png" alt="import-content-from-desltop.png" /></div> <h3>Menu Editor</h3> <p>We have also supported the Menu Edit Dialog in Joomla 4.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/932/57932/menu-editor-joomla-4.png" alt="menu-editor-joomla-4.png" /></div> <h3>Position Output</h3> <p>Now, you can output positions on your Joomla 4 websites.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/931/57931/positions-joomla4.png" alt="positions-joomla4.png" /></div> <h3>Edit Link Dialog</h3> <p>We have implemented the Edit Link dialog in Joomla 4.</p> <div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/969/57969/edit-link-joomla-4.png" alt="edit-link-joomla-4.png" /></div> <p>Please note that Nicepage for Joomla 4 is still in beta, and we are waiting for your comments and suggestions. For that please <a href="https://nicepage.com/Forum/Topic/Create">contact our support</a>.</p> <h2 id="documentation">Documentation</h2> <ul> <li><a href="/doc/131305/site-footer">How to use Footer</a></li> <li><a href="/doc/164382/video-element">How to use Video Element</a></li> <li><a href="/doc/131344/sidebar">How to use Sidebar</a></li> </ul> <h2 id="fixed-issues">Fixed Issues</h2> <ul> <li>Application of the Icon Presents without the click</li> <li>Page duplication to another website</li> <li>Property Panel Scroll for the Element placed into the Grid Repeater</li> <li>Featured Image for the HTML Blog Posts</li> <li>Export and import a Project from Online to Desktop Edition</li> <li>Assignment a Folder as a Home Page</li> <li>Unwanted ungroup of the Elements for the Header Over Block</li> <li>Absent Plus Icon for the Video Background in a Block</li> <li>Invalid Reset Responsive operation for setting the Group Height</li> <li>Invalid dragging of Elements between Header Rows in the Outline</li> <li>Invalid Menu Item Editing</li> <li>Invalid Animation for the Blocks of smaller Heights</li> <li>Invalid scrolling of the Editor after editing Posts</li> <li>Invalid zip while exporting the Project</li> <li>Invalid Padding for the Hover Box</li> <li>Invalid indent while copy, paste or move the Block up</li> <li>Invalid drag-and-drop in the Outline</li> <li>Invalid Color Change while editing Text</li> <li>Invalid Width of the Post Image after deletion and further addition</li> <li>Invalid Sites' list in the Quick Access Panels</li> <li>Invalid message while duplication a page to another site</li> <li>Deletion of the Menu Items after the application of the Menu Presets</li> <li>Blog Posts control_ Issue with Post Image element</li> <li>Misplacing Elements in the Phone View while dragging an icon</li> <li>Misplacing of the Buttons while deleting icons in buttons in the Grid Repeater</li> <li>Unable to rarely export some projects </li> <li>Rare Tutorial crashes</li> <li>Unable to activate the Old Price option for the Product templates in the Applications </li> <li>Joomla: invalid messages for the While Label </li> <li>Joomla: invalid Menu for some 404 Not Found pages</li> <li>Joomla: unable to export to Joomla for some projects </li> </ul> <h2 id="block-and-page-designs">Block and Page Designs</h2> <p>We have created <a href="https://nicepage.com/html-templates">new block and page designs</a> up to this update.<br /> <a href="https://nicepage.com/html-templates"><div class="use-lightbox" style="display: inline-block"><img class="lazyload" data-src="https://resources.nicepage.com/804/57804/new-designs-327.jpg" alt="new-designs-327.jpg" /></div></a></p> <span class="post-content-quote" id="post-content-192635">## What's New in This Update? - Hover Animation Effects (Beta) - Color On Hover - Border On Hover - Radius On Hover - Shadow On Hover - Transparency On Hover - Hover Duration - Quick Access Media Panel - Add Images - Search Images - Insert Images to Page - Joomla 4 Extension Updated - Plugin Installation Wizard - Import Content From Desktop - Menu Editor - Position Output - Edit Link Dialog - New Block and Page Designs ## Hover Animation (Beta) Animation is the key interaction feature of any modern website. Therefore, we improved effects for the Icon, Shape, Image, and Text Elements. !hover-animation.gif! In future updates, we plan to add the hover effects for containers like the Group, Grid, and Grid Repeater Cells. ## Hover Properties The following example shows the Hover Animation applied to the Border, Radius, Shadow, and Transparency properties of the Image Element. Depending on the Element you can set the following properties on hover: - Duration - Color - Background - Border - Radius - Shadow - Transparency ## !image-hover-properties.png! ### How To Change The Color on Hover For example, you can change the Shape Color on hover. 1. Select the added Shape Element and go to the Property Panel to the right. 2. Select the Hover Animation checkbox. 3. Choose the Hover Tab. 4. Change the Color to be applied on hover. 5. Click somewhere in the Block to unselect the Shape. 6. Hover the Shape to test the Color Change. ## !hover-color.gif! ### Border on Hover You can also change the Hover Border. !hover-border.gif! ### Radius on Hover For Images and Shapes, you can specify the Radius on Hover. !hover-radius.gif! ### Shadow on Hover The Shadow also can be altered on hover. !hover-shadow.gif! ### Transparency on Hover You can also add interaction with Transparency on Hover. !hover-transparency.gif! ### How To Change Hover Duration The Duration specifies the time of transition from the default to the hover state. !hover-duration.gif! ## Media Panel Images are vital for any website, and it is also essential to easily access them while designing a web page. We have added the Quick Access Media Panel to add, remove, and insert images to block more conveniently. !media-panel.png! ### Add Images You can Add Images by clicking the Plus icon and selecting images in the Open dialog. !media-panel-add-images.png! You can also drag images from your desktop or local folder. !media-panel-drag-images.png! ### Search Images By Name You can search images by typing the letters of their file names in the search box. !media-panel-search-image.png! ## Insert Images to Page To add an image from the Quick Access Media Panel to a Block, click or drag it in the Panel. !media-panel-insert-image.gif! ## Joomla 4 Extension (Beta) Updated Since the Joomla 4 has gained more popularity, we are continuing to improve its support. In this update, we have improved the Nicepage Joomla 4 Extension by implementing the following features. - Plugin Installation Wizard - Import Content From Desktop - Menu Editor - Position Output - Edit Link Dialog Please note that to get the Joomla 4 Extension, you have to export it from the desktop applications for Windows or Mac OS. !joomla-4-extension-export.png! ### Plugin Installation Wizard We have improved the installation wizard for the Nicepage Joomla 4 Extension. !joomla-4-installation-wizard.png! ### Import Content From Desktop Now, you can import the content exported from the Desktop Applications. !import-content-from-desltop.png! ### Menu Editor We have also supported the Menu Edit Dialog in Joomla 4. !menu-editor-joomla-4.png! ### Position Output Now, you can output positions on your Joomla 4 websites. !positions-joomla4.png! ### Edit Link Dialog We have implemented the Edit Link dialog in Joomla 4. !edit-link-joomla-4.png! Please note that Nicepage for Joomla 4 is still in beta, and we are waiting for your comments and suggestions. For that please [contact our support](https://nicepage.com/Forum/Topic/Create). ## Documentation - [How to use Footer](page:131305) - [How to use Video Element](page:164382) - [How to use Sidebar](page:131344) ## Fixed Issues - Application of the Icon Presents without the click - Page duplication to another website - Property Panel Scroll for the Element placed into the Grid Repeater - Featured Image for the HTML Blog Posts - Export and import a Project from Online to Desktop Edition - Assignment a Folder as a Home Page - Unwanted ungroup of the Elements for the Header Over Block - Absent Plus Icon for the Video Background in a Block - Invalid Reset Responsive operation for setting the Group Height - Invalid dragging of Elements between Header Rows in the Outline - Invalid Menu Item Editing - Invalid Animation for the Blocks of smaller Heights - Invalid scrolling of the Editor after editing Posts - Invalid zip while exporting the Project - Invalid Padding for the Hover Box - Invalid indent while copy, paste or move the Block up - Invalid drag-and-drop in the Outline - Invalid Color Change while editing Text - Invalid Width of the Post Image after deletion and further addition - Invalid Sites' list in the Quick Access Panels - Invalid message while duplication a page to another site - Deletion of the Menu Items after the application of the Menu Presets - Blog Posts control_ Issue with Post Image element - Misplacing Elements in the Phone View while dragging an icon - Misplacing of the Buttons while deleting icons in buttons in the Grid Repeater - Unable to rarely export some projects - Rare Tutorial crashes - Unable to activate the Old Price option for the Product templates in the Applications - Joomla: invalid messages for the While Label - Joomla: invalid Menu for some 404 Not Found pages - Joomla: unable to export to Joomla for some projects ## Block and Page Designs We have created [new block and page designs](https://nicepage.com/html-templates) up to this update. [!new-designs-327.jpg!](https://nicepage.com/html-templates) </span> </div> </div> </div> </div> </div> <div class="col-md-4 col-sticky"> <div class=" sidebar-container col-widgets"> <div class="row"> <div class="col-md-12"> <h3>In this article</h3> </div> </div> <div class="row"> <div class="col-md-12"> <div> <ul class="doc-article-list doc-waypoint-list"> <li class="doc-waypoint-item" data-id="whats-new-in-this-update"> <a href="#whats-new-in-this-update">What's New in This Update?</a> </li> <li class="doc-waypoint-item" data-id="hover-animation-beta"> <a href="#hover-animation-beta">Hover Animation (Beta)</a> </li> <li class="doc-waypoint-item" data-id="hover-properties"> <a href="#hover-properties">Hover Properties</a> </li> <li class="doc-waypoint-item" data-id="media-panel"> <a href="#media-panel">Media Panel</a> </li> <li class="doc-waypoint-item" data-id="insert-images-to-page"> <a href="#insert-images-to-page">Insert Images to Page</a> </li> <li class="doc-waypoint-item" data-id="joomla-4-extension-beta-updated"> <a href="#joomla-4-extension-beta-updated">Joomla 4 Extension (Beta) Updated</a> </li> <li class="doc-waypoint-item" data-id="documentation"> <a href="#documentation">Documentation</a> </li> <li class="doc-waypoint-item" data-id="fixed-issues"> <a href="#fixed-issues">Fixed Issues</a> </li> <li class="doc-waypoint-item" data-id="block-and-page-designs"> <a href="#block-and-page-designs">Block and Page Designs</a> </li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-12"> <h3><a class="doc-category-caption" href="/doc/c/release-notes">Release Notes</a></h3> </div> </div> <div class="row"> <div class="col-md-12"> <ul class="doc-article-list"> <li> <a href="/doc/555893/edit-theme-and-templates-directly-in-wordpress-and-joomla" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Nicepage 7.3: January 28, 2024 - Edit Theme And Templates Directly In WordPress and Joomla </a> </li> <li> <a href="/doc/552256/ai-powered-text-builder" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Nicepage 7.2: December 24, 2024 - AI-Powered Text Builder </a> </li> <li> <a href="/doc/547828/search-element-improvements" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 7.1: December 5, 2024 - Search Element Improvements </a> </li> <li> <a href="/doc/542428/nicepage-7-released-calendar-booking-form" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 7.0: November 14, 2024 - V7 Released! </a> </li> <li> <a href="/doc/545436/calendar-appointments-and-booking" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Nicepage 6.21: November 1, 2024 - Calendar Appointments and Booking </a> </li> <li> <a href="/doc/539264/multi-layer-backgrounds" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.20: October 21, 2024 - Multi-Layer Backgrounds </a> </li> <li> <a href="/doc/536948/site-search-results-improvements" class=""> <svg id="icon-video" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M5,4.6v6.9C5,12,5.5,12.2,5.9,12l5.8-3.4c0.3-0.2,0.3-0.7,0-0.9L5.9,4.1C5.5,3.8,5,4.1,5,4.6z"/> </svg> Nicepage 6.19: October 8, 2024 - Site Search Results Improvements </a> </li> <li> <a href="/doc/534072/site-search-manage-instant-site-preview" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.18: September 24, 2024 - Site Search. Instant Site Preview </a> </li> <li> <a href="/doc/530570/ai-powered-template-ideas" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.17: September 6, 2024 - AI-Powered Template Ideas </a> </li> <li> <a href="/doc/527464/ai-personalized-block-content" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.16: August 21, 2024 - AI-Personalized Block Content </a> </li> <li> <a href="/doc/524822/ai-powered-anti-spam-filter-personalize-design-content-ai" class=""> <svg id="icon-document" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> <path fill="#4184F4" d="M15,1v14H1V1 M16,0H0v16h16V0L16,0z"/> <path fill="#4184F4" d="M13,4H3v1h10V4L13,4z"/> <path fill="#4184F4" d="M13,7H3v1h10V7L13,7z"/> <path fill="#4184F4" d="M10,10H3v1h7V10L10,10z"/> </svg> Nicepage 6.15: August 5, 2024 - AI-Powered Anti-Spam Filter. Personalize Design Content With AI </a> </li> <li><a href="/doc/c/release-notes">show more »</a></li> </ul> </div> </div> </div> </div> </div> </article> <script> $(function () { var loadingTime = new Date(); var timeoutMsec = 3 * 1000; var longTimeoutMsec = 10 * 1000; var imgNode = "<img src='//static.nicepage.com/images/social/icont-attention.png'/>"; var calculateScrollPercents = function() { var s = $(window).scrollTop(), d = $(document).height(), c = $(window).height(); var scrollPercent = (s / (d - c)) * 100; return scrollPercent; }; var showStickyFooter = function () { if (calculateScrollPercents() > 20 && !$('.subscribe-modal').hasClass('show')) { $('.subscribe-modal').addClass('show'); } }; var isEmail = function(email) { var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); }; var hideTooltip = function () { var emailInput = $('.email-input'); if (emailInput.data('ui-tooltip')) {//if tooltip has been initialized emailInput.tooltip('option', 'content', '').tooltip('close').tooltip('disable'); } } var timerId = null; var hasScrollbar = document.body.scrollHeight > document.body.clientHeight; if (!hasScrollbar) { timerId = setTimeout(function () { $('.subscribe-modal').addClass('show'); clearTimeout(timerId); timerId = null; }, longTimeoutMsec); } var emailInput = $('.email-input'); emailInput.attr("title", " "); emailInput .tooltip({ tooltipClass: 'top', position: { my: 'left top+10', at: 'left bottom' } }) .tooltip("disable") .on('mouseout focusout', function (event) { event.stopImmediatePropagation(); }) .on('input', hideTooltip); $('.subscribe-close').on('click', function () { $('.subscribe-modal').removeClass('show'); $.cookie("HideStickyFooter", 1, { expires: 180 }); }); $('.subscribe-btn').on('click', function (e) { e.preventDefault(); $('.error').hide(); var email = $('.email-input').val(); if (!isEmail(email)) { var tooltipContent = 'Enter a valid email address'; $('.email-input') .tooltip('option', 'content', imgNode + "<span style='margin-left: 10px;'>" + tooltipContent + '</span>') .tooltip('enable') .tooltip('open'); return; } $('#subscribe-form').submit(); }); $(window).on('scroll', function() { if ($.cookie("HideStickyFooter")) return; hideTooltip(); var currentTime = new Date(); if (currentTime.getTime() - loadingTime.getTime() > timeoutMsec) { if (!timerId) showStickyFooter(); } else if (!timerId) { timerId = setTimeout(function () { showStickyFooter(); clearTimeout(timerId); timerId = null; }, timeoutMsec - (currentTime - loadingTime)); } if (calculateScrollPercents() < 20 && $('.subscribe-modal').hasClass('show')) { $('.subscribe-modal').removeClass('show'); if (timerId) { clearTimeout(timerId); timerId = null; } } }); }); </script> <div class="subscribe-modal" data-backdrop="false"> <button type="button" class="subscribe-close"></button> <div class="content subscribe-form-holder"> <h1>Join Us</h1> <p>Get free website builder. Easy drag-and-drop.<br/> Choose from 15,000+ Templates.</p> <form method="post" id="subscribe-form" action="/Editor/Account/RegisterByEmail?returnUrl=%2Fdoc%2F192635%2Fhover-animation-effects&source=Article"> <input class="email-input" type="text" name="email" placeholder="Enter your email address"> <input class="subscribe-btn" type="submit" value="Join"> </form> </div> <div class="subscribe-success"> <div class="content"> <h2>Thanks for subscribing!</h2> </div> </div> </div> </section> <div id="push"></div> </div> <div class="footer"> <div class="footer-top"> <div class="container"> <style> .footer-top a { color: #ddd !important; font-size: 16px; } </style> <div class="row"> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Company</h6> <ul> <li><a href="/Terms">Terms of Use</a></li> <li><a href="/Privacy">Privacy Policy</a></li> <li><a href="/Agreement">License Agreement</a></li> <li><a href="/About">About Us</a></li> <li><a href="/partners">Partners</a></li> <li><a href="/Abuse">Abuse</a></li> <li><a href="/Forum/Topic/Create">Contact Support</a></li> </ul> </div> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Product</h6> <ul> <li><a href="/doc/frequently-asked-questions-16656">FAQ</a></li> <li><a href="/download">Download</a></li> <li><a href="/features">400+ Features</a></li> <li><a href="/affiliates">Affiliates</a></li> <li><a href="/doc">Documentation</a></li> <li><a href="/forum">Forum</a></li> <li><a href="/blog">Blog</a></li> </ul> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h6><a href="/templates">Themes & Templates</a></h6> <ul> <li><a href="/website-templates">Website Templates</a></li> <li><a href="/wordpress-themes">WordPress Themes</a></li> <li><a href="/html-templates">HTML Templates</a></li> <li><a href="/css-templates">CSS Templates</a></li> <li><a href="/joomla-templates">Joomla Templates</a></li> <li><a href="/html5-template">HTML5 Templates</a></li> <li><a href="/one-page-template">One Page Templates</a></li> </ul> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h6>Nicepage</h6> <ul> <li><a href="/website-builder">Website Builder</a></li> <li><a href="/html-website-builder">HTML Website Builder</a></li> <li><a href="/wordpress-website-builder">WordPress Website Builder</a></li> <li><a href="/joomla-page-builder">Joomla Page Builder</a></li> <li><a href="/wysiwyg-html-editor">WYSIWYG HTML Editor</a></li> <li><a href="/static-site-generator">Static Site Generator</a></li> <li><a href="/html-code">HTML Code Generator</a></li> </ul> </div> <div class="col-md-2 col-sm-6 col-xs-12"> <h6>Web Design</h6> <ul> <li><a href="/website-design">Website Designs</a></li> <li><a href="/web-page-design">Web Page Designs</a></li> <li><a href="/ecommerce-templates">eCommerce Designs</a></li> <li><a href="/landing-page">Landing Pages</a></li> <li><a href="/homepage-design">Homepage Designs</a></li> <li><a href="/website-mockup">Website Mockup</a></li> </ul> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="row"> <div id="footer-links" class="footer-inline col-sm-12 pull-right"> <div style="white-space: nowrap; float: left; text-align: left;"> <div class="row"> <div class="col-sm-3"> <a href="https://facebook.com/nicepageapp" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#3B5998" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M73.5,31.6h-9.1c-1.4,0-3.6,0.8-3.6,3.9v8.5h12.6L72,58.3H60.8v40.8H43.9V58.3h-8V43.9h8v-9.2 c0-6.7,3.1-17,17-17h12.5v13.9H73.5z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Facebook</span></a> </div> <div class="col-sm-3"> <a href="https://twitter.com/NicepageApp" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#55ACEE" class="st0" cx="56.1" cy="56.1" r="55"/> <path fill="#FFFFFF" d="M83.8,47.3c0,0.6,0,1.2,0,1.7c0,17.7-13.5,38.2-38.2,38.2C38,87.2,31,85,25,81.2c1,0.1,2.1,0.2,3.2,0.2 c6.3,0,12.1-2.1,16.7-5.7c-5.9-0.1-10.8-4-12.5-9.3c0.8,0.2,1.7,0.2,2.5,0.2c1.2,0,2.4-0.2,3.5-0.5c-6.1-1.2-10.8-6.7-10.8-13.1 c0-0.1,0-0.1,0-0.2c1.8,1,3.9,1.6,6.1,1.7c-3.6-2.4-6-6.5-6-11.2c0-2.5,0.7-4.8,1.8-6.7c6.6,8.1,16.5,13.5,27.6,14 c-0.2-1-0.3-2-0.3-3.1c0-7.4,6-13.4,13.4-13.4c3.9,0,7.3,1.6,9.8,4.2c3.1-0.6,5.9-1.7,8.5-3.3c-1,3.1-3.1,5.8-5.9,7.4 c2.7-0.3,5.3-1,7.7-2.1C88.7,43,86.4,45.4,83.8,47.3z"/> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Twitter</span></a> </div> <div class="col-sm-3"> <a href="https://youtube.com/nicepage?sub_confirmation=1" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#D22215" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M74.9,33.3H37.3c-7.4,0-13.4,6-13.4,13.4v18.8c0,7.4,6,13.4,13.4,13.4h37.6c7.4,0,13.4-6,13.4-13.4V46.7 C88.3,39.3,82.3,33.3,74.9,33.3L74.9,33.3z M65.9,57l-17.6,8.4c-0.5,0.2-1-0.1-1-0.6V47.5c0-0.5,0.6-0.9,1-0.6l17.6,8.9 C66.4,56,66.4,56.8,65.9,57L65.9,57z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">YouTube</span></a> </div> <div class="col-sm-3"> <a href="https://www.pinterest.com/nicepagecom/pins" rel="noreferrer" target="_blank" style="margin-right: 10px;"> <svg x="0px" y="0px" viewBox="0 0 112.2 112.2" style="width: 24px;"> <circle fill="#CB2027" cx="56.1" cy="56.1" r="55"></circle> <path fill="#FFFFFF" d="M61.1,76.9c-4.7-0.3-6.7-2.7-10.3-5c-2,10.7-4.6,20.9-11.9,26.2c-2.2-16.1,3.3-28.2,5.9-41 c-4.4-7.5,0.6-22.5,9.9-18.8c11.6,4.6-10,27.8,4.4,30.7C74.2,72,80.3,42.8,71,33.4C57.5,19.6,31.7,33,34.9,52.6 c0.8,4.8,5.8,6.2,2,12.9c-8.7-1.9-11.2-8.8-10.9-17.8C26.5,32.8,39.3,22.5,52.2,21c16.3-1.9,31.6,5.9,33.7,21.2 C88.2,59.5,78.6,78.2,61.1,76.9z"></path> </svg><span style="position: relative;top: -7px;margin-left: 5px;">Pinterest</span></a> </div> </div> </div>  <div class="copy">© 2025 Nicepage Free Website Builder Software - All Rights Reserved</div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Nicepage 3.27: October 6, 2021 - Hover Animation Effects. Quick Access Media Panel - Nicepage Help Center