Use CSS and HTML to create borders for your pictures. Use transparency and opacity
Running ...


Double border with Title and Links


  • We have the title of picture, link1, the picture with link2, and a third link
  • We use this HTML :


<div style="style of div block">Title of picture<br>

<a href="URL of link1"
title="title of link1"
style="border: 0 none ;
text-decoration: none;"
target="_blank">link 1</a>

<a href="URL of link 2"
title="title of link 2"
target="_blank"
style="border: 0 none ; text-decoration: none;
background-color: transparent;">

<img src="URL of picture"
style="style of picture"
title="title of picture"
alt="alt text for picture"></a><br>

<a href="URL of link 3"
title="title of link 3"
target="_blank"
style="border: 0 none ; text-decoration: none;">
link 3</a>

</div>


  • CSS, style of div block :
border: medium double #f00;
padding: 6px;
background: #c3d9ff;
width: 300px; /* width of picture + 20 pixels */
margin: auto;
text-align: center;
font-size:11px;
font-weight: bold;
color: #a90707;

  • CSS, style of picture :
border: 1px solid #000;
width: 280px; /* width of picture */
margin: 3px 0;


  • The result :




Golden Frame


  • We use a div block containing a picture
  • For gold color we use #ffd700


<div style="margin: auto;
width: 309px; /* width of pic + 2 * border */
border:1px solid #000;
background: #FFD700;">

<a href="URL of link"
target="_blank"
title="title of link"
style="background-color: transparent; border: 0 none; text-decoration: none;">

<img src="URL of picture"
style="width: 297px; border: 6px solid #FFD700;"
title="title of picture" alt="alt text">
</a>

</div>


  • The result :



A picture displayed like a Polaroid


  • We use a link under the picture, a text link and a title


<div style="width: 220px; margin: auto; padding: 15px; background-color: #c3d9ff; border: 1px solid black;
text-align: center; font-size: 11px;">

<a href="URL of link 1" title="title of link 1"
target="_blank"
style="border: 0 none; text-decoration: none;
background-color: transparent;">
<img style="width: 190px; border: 1px solid black;"
src="URL of picture">
</a>

<div style="margin: 15px auto 0; font-weight: bold;
color: #a90707;">
<a href="URL of link 2"
target="_blank" title="title of link 2"
style="border: 0 none ; text-decoration: none;">Link 2</a>
<br><br>
Title
</div>

</div>


  • The result :


Maurice Gay - The Maps

La Haute Couture des Vins du Valais



A Transparent Border




<div
style=
"width: 297px; height: 195px; /* inner size of pic + 2 * border */
margin: auto; padding: 0;
background-image: url(URL of picture);
border: 1px solid #000;">

<div style="width: 277px; height: 175px; /* inner size of pic */
border: 10px solid #fff; /* border width */
filter: alpha (opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
-khtml-opacity: 0.5;">
</div>

</div>


  • For Internet Explorer we use opacity between 0 and 100, for Firefox we use a rate between 0 and 1
  • The result :


Domaine du Manoir - Obrist


More Informations




One Day - One Label - One Wine