A.J.H. Computer Services

Tips
As used on this website
All Variables in RED
This Page

Body Text Photos Mouse Over Photos with Radius Radius+Mouse Over Pop-in Photos Adding Margin Mini Slideshow Bullet Zoom Scroll Links Buttons Drop Down Button Text Over Image Image Over Image

Tips
Some used on this website
All Variables in RED
Click Here

You can download a "Zipped" file with the STYLE.CSS file Click Here (3kb)

1. To set the page Colour and and Background

body {
background-color: #EFEFEF;
background-image: url("images/bg.jpg");
}

2. To set the default for the Text

P { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: justify
}

DT { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: justify
}

3. To override the default text format, eg: (in the HTML file) <P class="left">

P.right { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: right
}

P.left { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: left
}

DT.left { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: left
}

DT.right { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: right
}

Photos with Mouse Over

.big {
position: relative;
opacity: 1;
transform: scale(1, 1);
transition: 0.3s ease;
}

.big:hover {
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}
Adding a BIG Effect (with Mouse Over)
(You could also add link)
<IMG class="big" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.small {
position: relative;
opacity: 1;
transform: scale(1, 1);
transition: 0.3s ease;
}

.small:hover {
transform: scale(0.9, 0.9);
opacity: 1;
z-index: 1;
}
Adding a SMALL Effect (with Mouse Over)
(You could also add link)
<IMG class="small" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.dim {
opacity: 1.0;
filter: alpha(opacity=100);
transition: 0.3s ease;
}

.dim:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Adding a DIM Effect (with Mouse Over)
(You could also add link)
<IMG class="dim" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.rotate {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.rotate:hover {
transform: rotate(-15deg);
opacity: 1;
z-index: 1;
}
Adding a ROTATE Effect (with Mouse Over)
(You could also add link)
<IMG class="rotate" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.spin {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.spin:hover {
transform: rotate(360deg);
opacity: 1;
z-index: 1;
}
Adding a SPIN Effect (with Mouse Over)
(You could also add link)
<IMG class="spin" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.bw {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.bw:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Adding a BLACK & WHITE Effect
(with Mouse Over)
(You could also add link)
<IMG class="bw" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.shake {
.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}
Shake a Photo (with Mouse Over)
(You could also add link)
<IMG class="shake" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

Photos with Radius

.frame {
border: 1px solid #000000;
border-radius: 20px;
padding: 3px;
}
Adding a Frame to Your Photos
<IMG class="frame" SRC="xxxxx.xxx">

.imgbr {
border: 2px solid transparent;
padding: 2px;
border-radius: 25px;
}
Adding a Radius (No border)
<IMG class="imgbr" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr2 {
border: 1px solid black;
padding: 0px;
border-radius: 15px;
}
Adding a Radius (with border)
<IMG class="imgbr2" SRC="xxxxx.xxx">

.imgbr3 {
border: 0px solid transparent;
padding: 0px;
border-radius: 8px;
}
Adding a Small Radius (No border)
<IMG class="imgbr3" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbrc2 {
border: 2px solid black;
padding: 0px;
border-radius: 100%;
}
Adding a Full Radius (with border)
<IMG class="imgbrc2" SRC="xxxxx.xxx">

Note: If the photo is square it will be a circle

.imgbrc1 {
border: 0px solid transparent;
padding: 0px;
border-radius: 100%;
}
Adding a Full Radius (No border)
<IMG class="imgbrc1" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Note: If the photo is square it will be a circle

.imgbrc3 {
border: 2px solid black;
padding: 5px;
border-radius: 100%;
}
Adding a Full Radius
(with border and padding)
<IMG class="imgbrc3" SRC="xxxxx.xxx">

Note: If the photo is square it will be a circle

Photos with Radius and Mouse Over

.imgbr4 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
}

.imgbr4:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Adding Radius & DIM Effect
(with border and Mouse Over)
(You could also add link)
<IMG class="imgbr4" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.imgbr5 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr5:hover {
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}
Adding Radius & BIG Effect
(with border and Mouse Over)
(You could also add link)
<IMG class="imgbr5" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.imgbr5a {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr5a:hover {
transform: scale(0.9, 0.9);
opacity: 1;
z-index: 1;
}
Adding Radius & SMALL Effect
(with border and Mouse Over)
(You could also add link)
<IMG class="imgbr5a" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.imgbr6 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr6:hover {
transform: rotate(15deg);
opacity: 1;
z-index: 1;
}
Adding Radius & ROTATE Effect
(with border and Mouse Over)
(You could also add link)
<IMG class="imgbr6" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.imgbr7 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr7:hover {
transform: rotate(360deg);
opacity: 1;
z-index: 1;
}
Adding Radius & SPIN Effect
(with border and Mouse Over)
(You could also add link)
<IMG class="imgbr7" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.imgbr8 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr8:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Radius & BLACK & WHITE Effect
(with border and Mouse Over)
(You could also add link)
<IMG class="imgbr8" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.imgbr9 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}
.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}
Radius & Shake a Photo (with Mouse Over)
(You could also add link)
<IMG class="imgbr9" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

.gallery {
display: inline-block;
border: 1px solid #0B610B;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
opacity: 1;
filter: alpha(opacity=100);
}

.gallery:hover {
box-shadow: 0 0 2px 3px rgba(256, 0, 0, 1);
opacity: 0.5;
filter: alpha(opacity=50);
}
Gallery Thumbnails (with Mouse Over)
(You could also add link)
<IMG class="gallery" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over

Pop-in Photos

.imgbrbigup {
border: 1px solid Black;
padding: -1px;
border-radius: 5px;
transition: 0.1s ease;
}

.imgbrbigup:hover {
position: relative;
top: -5px;
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}

.imgbrbigup:active {
position: relative;
top: -250px;
transform: scale(8, 8);
opacity: 1;
z-index: 1;
}
Pop-up Photos from Bottom of Page
(with Mouse Over)
(Click to see Big Photo)
<IMG class="imgbrbigup" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over and Click

.imgbrbigdown {
border: 1px solid Black;
padding: -1px;
border-radius: 5px;
transition: 0.1s ease;
}

.imgbrbigdown:hover {
position: relative;
top: 5px;
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}

.imgbrbigdown:active {
position: relative;
top: 250px;
transform: scale(8, 8);
opacity: 1;
z-index: 1;
}
Pop-down Photos from Top of Page
(with Mouse Over)
(Click to see Big Photo)
<IMG class="imgbrbigdown" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Move Mouse Over and Click

.imgbrbigleft {
border: 1px solid Black;
padding: -1px;
border-radius: 5px;
transition: 0.1s ease;
}

.imgbrbigleft:hover {
position: relative;
top: 5px;
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}

.imgbrbigleft:active {
position: relative;
top: 300px;
transform: scale(8, 8);
opacity: 1;
z-index: 1;
}
Pop-in Photos from Right of Page
(with Mouse Over)
(Click to see Big Photo)
<IMG class="imgbrbigleft" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over and Click

.imgbrbigright {
border: 1px solid Black;
padding: -1px;
border-radius: 5px;
transition: 0.1s ease;
}

.imgbrbigright:hover {
position: relative;
left: -5px;
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}

.imgbrbigright:active {
position: relative;
left: -300px;
transform: scale(8, 8);
opacity: 1;
z-index: 1;
}
Pop-in Photos from Left of Page
(with Mouse Over)
(Click to see Big Photo)
<IMG class="imgbrbigright" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over and Click

Adding Margin to Photos

.imgl
{margin-right: 2%;
}

.imgr
{margin-left: 2%;
}

Adding a Margin to the Right or Left
<IMG class="imgl" SRC="xxxxx.xxx">

Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here
<IMG class="imgr" SRC="xxxxx.xxx">

Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here

Mini Slideshow

.fling-minislide {
width:250px;
height:166px;
position:relative;}
.fling-minislide img{ position:absolute;
animation:fling-minislide 20s infinite;
overflow: hidden;
opacity: 0;
width: 100%;
height: auto;
border: 2px solid black;
padding: 0px;
border-radius: 15px;}
@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}
Adding a Mini Slideshow Effect

In the HTML file

<CENTER><TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">
<TR><TD>
<div class="fling-minislide">
<img src="xxx.jpg">
<img src="xxx.jpg">
<img src="xxx.jpg">
<img src="xxx.jpg">
</div>
</TD></TR>
</TABLE></CENTER>

Bullet

.bullet{
background-color:#000000;
color:#FFFFFF;
font:bold 12px arial;
display:inline-block;
padding-left:6px;
padding-right:6px;
border-radius:50%;
text-align:center}
.bullet:hover {
background-color:#FFFFFF;
color:#000000;}
Adding a BULLET Effect
(with Mouse Over)
(You could also add link)

<span class="bullet">1</span> xxxxxxxx
1 Bullet1
2 Bullet2
3 Bullet3
4 Bullet3
5 Bullet3
6 Bullet4

Zoom

.zoom {
animation:animatezoom 0.9s}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}
}
<BODY class="zoon">
If you can see this, your browser doesn't understand 'IFRAME'. <A HREF="frame0.html">Back to Home Page

Scroll

.scroll {
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}
<div class="scroll">Test/Images</div>

Or just for one line:-
<P class="scroll">Test/Images</P>
<DT class="scroll">Test/Images</DT>
If you can see this, your browser doesn't understand 'IFRAME'. <A HREF="frame0.html">Back to Home Page

Links

.link:link {color:#0000ff;text-decoration: none;}
.link:visited {color:#29088A;text-decoration: none;}
.link:hover {color:#ff0000;text-decoration: underline;}
.link:active {color:#ff0000;text-decoration: none;}

In the HTML file
<A class="link" HREF="xxxx.html"><B>New Link</B></A>
Or with the CSS file downloaded
New Link

Visited Link

Buttons

In the HTML file
<A class="button" HREF="xxxx.html">Button</A>
<A class="button1" HREF="xxxx.html">Button1</A>
<A class="button2" HREF="xxxx.html">Button2</A>
<A class="button3" HREF="xxxx.html">Button3</A>
<A class="button4" HREF="xxxx.html">Button4</A>
With the CSS file downloaded
Button

Button1

Button2

Button3

Button4

Buttons

.dropbtn {
background-color: #008000;
position: relative;
color: white;
padding: 2px;
font:bold 12px arial;
border: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 8px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 150px;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #dddddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4CAF50;} Or with the CSS file downloaded

In the HTML file
<div class="dropdown">
<button class="dropbtn">Go To</button>
<div class="dropdown-content">
<a href="xxxx.xxx">Link 1</a>
<a href="xxxx.xxx">Link 2</a>
<a href="xxxx.xxx">Link 3</a>
<a href="xxxx.xxx">Link 4</a>
<a href="xxxx.xxx">Link 5</a>
And so on
</div>
</div>

Body Text Photos Mouse Over Photos with Radius Radius+Mouse Over Pop-in Photos Adding Margin Mini Slideshow Bullet Zoom Scroll Links Buttons Drop Down Button Text Over Image Image Over Image

AJH Home Page AJH Sites Useful Files Links to Good Sites Other AJH Pages Internet Tools

Text Over Image (On Mouse Over)

.textover1 {
position: relative;
width: 100%;
}
.middle1 {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
}
.textover1:hover .middle1 {
opacity: 1;
}
.text1 {
background-color: #000000;
color: white;
border: 2px solid white;
padding-right:2px;
border-radius: 8px;
font: bold 12px arial;
padding: 2px 10px;

In the HTML file
<div class="textover1">
<img src="xxxx.xxx" ALT="xxxxx" TITLE="xxxxx" WIDTH="250" HEIGHT="166" BORDER="1">
<div class="middle1">
<div class="text1">xxxxx</div>
</div>
</div>

Waverley Abbey, Surrey

Waverley Abbey
Surrey

Move Mouse Over

Or with the CSS file downloaded

Text Over Image (On Mouse Over)

.textover2 {
position: relative;
width: 100%;
}
.middle2 {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
}
.textover2:hover .middle2 {
opacity: 1;
}
.text2 {
background-color: #ffffff;
color: black;
border: 2px solid black;
padding-right:2px;
border-radius: 8px;
font: bold 12px arial;
padding: 2px 10px;
}

In the HTML file
<div class="textover2">
<img src="xxxx.xxx" ALT="xxxxx" TITLE="xxxxx" WIDTH="250" HEIGHT="166" BORDER="1">
<div class="middle2">
<div class="text2">xxxxx</div>
</div>
</div>

Waverley Abbey, Surrey

Waverley Abbey
Surrey

Move Mouse Over

Or with the CSS file downloaded

Text Over Image (On Mouse Over)

.textover3 {
position: relative;
width: 100%;
}
.middle3 {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
}
.textover3:hover .middle3 {
opacity: 1;
}
.text3 {
background-color: solid transparent;
color: white;
border: solid transparent;
padding-right: 2px;
border-radius: 8px;
font: bold 14px arial;
padding: 2px 10px;
}

In the HTML file
<div class="textover3">
<img src="xxxx.xxx" ALT="xxxxx" TITLE="xxxxx" WIDTH="250" HEIGHT="166" BORDER="1">
<div class="middle3">
<div class="text3">xxxxx</div>
</div>
</div>

Waverley Abbey, Surrey

Waverley Abbey
Surrey

Move Mouse Over

Or with the CSS file downloaded

Text Over Image

.textover4 {
position: relative;
text-align: center;
color: Black;
}
.centered4 {
position: absolute;
font: bold 12px arial;
bottom: 1px;
left: 50%;
transform: translate(-50%, -50%);
}

In the HTML file
<div class="textover4">
<img src="xxxx.xxx" ALT="xxxxx" TITLE="xxxxx" WIDTH="250" HEIGHT="166" BORDER="1">
<div class="centered4">xxxxx</div>
</div>

Waverley Abbey, Surrey

Or with the CSS file downloaded

Image Over Image

#containerg {
position:relative;
}

#img2 {
position: absolute;
left: 69px;
top: 25px;
}

This Over This Glob The World is a Very Big Place

In the HTML file
<div id="containerg">
<img src="xxxx.xxx" id="img1" WIDTH="150" HEIGHT="200" BORDER="0" />
<img src="xxxx.xxx" id="img2" WIDTH="150" HEIGHT="150" BORDER="0" />
</div>

Glob

Or with the CSS file downloaded

You can download a "Zipped" file with the STYLE.CSS file Click Here (3kb)
JavaScript Tips

These website files are given here "as is" basis. A.J.H. Computer Services makes no representations or warranties of any kind, express or implied, as to the operation of the sites. The information, content, materials or products, included with these files. To the full extent permissible by applicable law, A.J.H. Computer Services disclaims all warranties, express or implied, including but not limited to, implied warranties of merchantability and fitness for a particular purpose. A.J.H. Computer Services will not be liable for any damages of any kind arising from the use of these files, including but not limited to direct, indirect, incidental punitive and consequential damages.

Contact Me

© A.J.H. Computer Services