Menu
Community /Pin to ProfileBookmark
@cootheadApr 05.2021 — #Hi there Firass_Barakat,
here is an example...
This effect [b]will not work[/b] with the hr element.
[i]coothead[/i]
Hr Image
I am Trying to make an hr with circled Image through it what should I do ?
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadApr 05.2021 — #Hi there Firass_Barakat,here is an example...
<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.5em sans-serif;
}
#line {
position: relative;
margin-top: 6.25em;
border-bottom: 0.25em solid #000; <br/>
}
#line img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
border: 0.25em solid #000;
border-radius: 50%;
box-shadow: 0 0 1em rgba( 0, 0, 0, 0.7 );
}
</style>
</head>
<body>
<div id="line">
<img src="https://coothead.co.uk/images/anim2.gif" width="100" height="100" alt="">
</div>
</body>
</html>
This effect [b]will not work[/b] with the hr element.
[i]coothead[/i]