Hello. I have a need to show my images with reflection in an mvc application. I want this to be cross- browser. I have looked at a number of examples but I found only one that came close. The image is that of one of several employees which will change on record selection change. So it has to be dynamic. Unfortunately, the sample I found has the reference to the image in the CSS. What I need is for the reference to the png file be placed in the HTML code, so that the CSS will simply format whatever image is retrieved from the images folder and loaded in the HTML. Below are my css and html codes respectively:
ul, li
{
padding: 0;
margin: 0;
list-style: none;
}
li
{
display: inline-block;
margin: 8px;
text-align: center;
cursor: default;
}
li strong
{
font: bold 12px/36px Arial, Sans-serif;
color: #404040;
}
.gf-icon-huge
{
position: relative;
width: 141px;
height: 141px;
background: url("icons-huge.png") no-repeat;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
.gf-icon-reflection::before,
.gf-icon-reflection::after
{
content: "";
position: absolute;
top: 100%;
z-index: -1;
width: inherit;
height: inherit;
display: block;
}
.gf-icon-reflection::before
{
background: inherit;
filter: flipv();
-moz-transform: scaley(-1);
-webkit-transform: scaley(-1);
-o-transform: scaley(-1);
-ms-transform: scaley(-1);
transform: scaley(-1);
}
.gf-icon-reflection::after
{
background: -moz-linear-gradient(
90deg,
#fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: -webkit-linear-gradient(
90deg, #fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: -o-linear-gradient(
90deg, #fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: -ms-linear-gradient(
90deg,
#fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: linear-gradient(
90deg, #fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
}
.gf-icon-huge.gf-icon-public-cloud
{
background-position: -161px 0;
}
.gf-icon-huge.gf-icon-notifications
{
background-position: -10px 0;
}
.gf-icon-huge.gf-icon-search
{
background-position: -312px 0;
}
.gf-icon-huge div
{
display: none;
}
.gf-icon-huge div
{
display: block\9;
}
.gf-icon-huge div
{
top: 100%;
position: absolute;
z-index: -1;
width: inherit;
height: inherit;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#ffffff);
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Crossbrowser CSS3 Reflections</title>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<h1>Crossbrowser CSS3 Reflections</h1>
<div>
<ul>
<li><div class="gf-icon-huge gf-icon-public-cloud gf-icon-reflection"><div><!-- / --></div></div>public cloud</li>
<li><div class="gf-icon-huge gf-icon-notifications gf-icon-reflection"><div><!-- / --></div></div>notifications</li>
<li><div class="gf-icon-huge gf-icon-search gf-icon-reflection"><div><!-- / --></div></div>search</li>
</ul>
</div>
</body>
</html>
What I have tried:
I have tried to pass the image file as a parameter from HTML to CSS without luck.