{"id":10363,"date":"2024-01-21T15:41:20","date_gmt":"2024-01-21T18:41:20","guid":{"rendered":"https:\/\/mol-en.icb.usp.br\/?page_id=10363"},"modified":"2024-01-21T15:43:07","modified_gmt":"2024-01-21T18:43:07","slug":"teste-fade-in-overlay-icon","status":"publish","type":"page","link":"https:\/\/mol-en.icb.usp.br\/index.php\/teste-fade-in-overlay-icon\/","title":{"rendered":"TESTE Fade in Overlay Icon"},"content":{"rendered":"

<!DOCTYPE html>
\n<html>
\n<head>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1″>
\n<link rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css”>
\n<style>
\n.container {
\nposition: relative;
\nwidth: 100%;
\nmax-width: 400px;
\n}<\/p>\n

.image {
\ndisplay: block;
\nwidth: 100%;
\nheight: auto;
\n}<\/p>\n

.overlay {
\nposition: absolute;
\ntop: 0;
\nbottom: 0;
\nleft: 0;
\nright: 0;
\nheight: 100%;
\nwidth: 100%;
\nopacity: 0;
\ntransition: .3s ease;
\nbackground-color: red;
\n}<\/p>\n

.container:hover .overlay {
\nopacity: 1;
\n}<\/p>\n

.icon {
\ncolor: white;
\nfont-size: 100px;
\nposition: absolute;
\ntop: 50%;
\nleft: 50%;
\ntransform: translate(-50%, -50%);
\n-ms-transform: translate(-50%, -50%);
\ntext-align: center;
\n}<\/p>\n

.fa-user:hover {
\ncolor: #eee;
\n}
\n<\/style>
\n<\/head>
\n<body><\/p>\n

<h2>Fade in Overlay Icon<\/h2>
\n<p>Hover over the image to see the effect.<\/p><\/p>\n

<div class=”container”>
\n<img src=”=” http:\/\/mol.icb.usp.br\/wp-content\/uploads\/1-6.jpg”\u00a0 >
\n<div class=”overlay”>
\n<a href=”#” class=”icon” title=”User Profile”>
\n<i class=”fa fa-user”><\/i>
\n<\/a>
\n<\/div>
\n<\/div><\/p>\n

<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"

<!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css”> <style> .container { position: relative; width: 100%; max-width: 400px; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s ease; background-color: red; } .container:hover […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10363","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/pages\/10363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/comments?post=10363"}],"version-history":[{"count":4,"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/pages\/10363\/revisions"}],"predecessor-version":[{"id":10370,"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/pages\/10363\/revisions\/10370"}],"wp:attachment":[{"href":"https:\/\/mol-en.icb.usp.br\/index.php\/wp-json\/wp\/v2\/media?parent=10363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}