Asked  6 Months ago    Answers:  5   Viewed   77 times

I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must be black or transparent.

I cannot use a black rectangle with a white circle on top of it because the half circle has to be transparent and let the background show through.

Desired shape :

rectangle with cut out half circle

 Answers

46

May be can do it with CSS :after pseudo property like this:

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle:after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}
<div class="rect">&nbsp;<span class="circle"></span></div>

View on JSFiddle

Tuesday, June 1, 2021
 
Blacksonic
answered 6 Months ago
28

You can achieve a transparent cut out circle with 2 different techniques :

1.SVG

The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made with 2 arc commands :

With the mask element :

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
<svg viewbox="0 0 100 50" width="100%">
  <defs>
    <mask id="mask" x="0" y="0" width="80" height="30">
      <rect x="5" y="5" width="90" height="40" fill="#fff"/>
      <circle cx="50" cy="25" r="15" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>    
</svg>

With one path element :

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;
}
path{
  transition:fill .5s;
  fill:#E3DFD2;
}
path:hover{
  fill:pink;
}
<svg viewbox="-10 -1 30 12">
  <path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>

The main advantages of using SVG in this case are :

  • Shorter code
  • You can easily use an image or gradient to fill the circle mask
  • maintain the boundaries of the shape and trigger mouse envents only over the fill respecting the mask (hover the transparent cut out circle in the example)

transparent cut out circle

2. CSS only using BOX-SHADOWS

Create a div with overflow:hidden; and a round pseudo element inside it with border-radius. Give it a huge box-shadow and no background :

div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:175px; top:25px;
    border-radius:100%;
    width:150px; height:150px;
    box-shadow: 0px 0px 0px 2000px #E3DFD2;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
<div></div>

Browser support for box-shadows is IE9+ see canIuse

The same approach would be to use border instead of box-shadows. It is interesting if you need to support borowsers that don't support box-shadows like IE8. The technique is the same but you need to compensate with the top and left values to keep the circle in the center of the div :

body{
    background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
    background-size:cover;
}
div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:-325px; top:-475px;
    border-radius:100%;
    width:150px; height:150px;
    border:500px solid #E3DFD2;
}
<div></div>
Saturday, June 5, 2021
 
francadaval
answered 6 Months ago
70

Try this:

To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg.

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}
<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

The example:

http://jsfiddle.net/diegoh/mXLgF/1154/

Monday, June 7, 2021
 
BartmanEH
answered 6 Months ago
18

Here's a quick PoC based on Boost BiMap

typedef boost::bimap<bimaps::list_of<default_color_type>, bimaps::set_of<Traits::vertex_descriptor> > smart_map;
smart_map colorMap;
boost::associative_property_map<smart_map::right_map> color_map(colorMap.right);

I've taken a small sample from http://lpsolve.sourceforge.net/5.5/DIMACS_maxf.htm and you can see it Live On Coliru, output:

c  The total flow:
s 15

c flow values:
f 0 1 5
f 0 2 10
f 1 3 5
f 1 4 0
f 2 3 5
f 2 4 5
f 3 5 10
f 4 5 5
ltr: 0 -> 5
ltr: 4 -> 0
ltr: 0 -> 1
ltr: 4 -> 2
ltr: 0 -> 3
ltr: 0 -> 4
rtl: 0 -> 4
rtl: 1 -> 0
rtl: 2 -> 4
rtl: 3 -> 0
rtl: 4 -> 0
rtl: 5 -> 0

Full Listing:

#include <boost/foreach.hpp>
#include <boost/bimap.hpp>
#include <boost/graph/adjacency_list.hpp>
#include <boost/bimap/list_of.hpp>
#include <boost/bimap/set_of.hpp>
#include <boost/graph/edmonds_karp_max_flow.hpp>
#include <boost/graph/graph_utility.hpp>
#include <boost/graph/read_dimacs.hpp>
#include <boost/lexical_cast.hpp>
#include <boost/property_map/property_map.hpp>
#include <boost/unordered_map.hpp>

int main() {
    using namespace boost;

    typedef adjacency_list_traits<vecS, vecS, directedS> Traits;
    typedef adjacency_list<
        listS, vecS, directedS, property<vertex_name_t, std::string>,
        property<edge_capacity_t, long,
        property<edge_residual_capacity_t, long, 
        property<edge_reverse_t, Traits::edge_descriptor> > > > Graph;

    Graph g;

    property_map<Graph, edge_capacity_t>::type capacity                   = get(edge_capacity, g);
    property_map<Graph, edge_reverse_t>::type rev                         = get(edge_reverse, g);
    property_map<Graph, edge_residual_capacity_t>::type residual_capacity = get(edge_residual_capacity, g);

    typedef boost::bimap<bimaps::list_of<default_color_type>, bimaps::set_of<Traits::vertex_descriptor> > smart_map;
    smart_map colorMap;
    boost::associative_property_map<smart_map::right_map> color_map(colorMap.right);

    Traits::vertex_descriptor s, t;
    read_dimacs_max_flow(g, capacity, rev, s, t);

    std::vector<Traits::edge_descriptor> pred(num_vertices(g));
    long flow = edmonds_karp_max_flow(
            g, s, t, capacity, residual_capacity, rev,
            color_map, &pred[0]);

    std::cout << "c  The total flow:" << std::endl;
    std::cout << "s " << flow << std::endl << std::endl;

    std::cout << "c flow values:" << std::endl;
    graph_traits<Graph>::vertex_iterator u_iter, u_end;
    graph_traits<Graph>::out_edge_iterator ei, e_end;
    for (boost::tie(u_iter, u_end) = vertices(g); u_iter != u_end; ++u_iter)
        for (boost::tie(ei, e_end) = out_edges(*u_iter, g); ei != e_end; ++ei)
            if (capacity[*ei] > 0)
                std::cout << "f " << *u_iter << " " << target(*ei, g) << " " << (capacity[*ei] - residual_capacity[*ei])
                          << std::endl;

    for (auto const& e : colorMap.left)  std::cout << "ltr: " << e.first << " -> " << e.second << "n";
    for (auto const& e : colorMap.right) std::cout << "rtl: " << e.first << " -> " << e.second << "n";

    return EXIT_SUCCESS;
}

UPDATE

Using Boost MultiIndex to create a bidirectional mapping:

struct VertexColor {
    Traits::vertex_descriptor vertex;
    boost::default_color_type color;
};

typedef boost::multi_index_container<
    VertexColor,
    bmi::indexed_by<
        bmi::hashed_non_unique<bmi::tag<struct by_color>,  bmi::member<VertexColor, boost::default_color_type, &VertexColor::color> >,
        bmi::ordered_unique   <bmi::tag<struct by_vertex>, bmi::member<VertexColor, Traits::vertex_descriptor, &VertexColor::vertex> >
    >
> smart_map;

Now, using Boost Property Map to model a ReadWritePropertyMap:

struct bidi_color_map {
    typedef smart_map::index<by_vertex>::type impl_t;
    bidi_color_map(impl_t& ref) : ref_(&ref) {}
    impl_t       &get()       { return *ref_; }
    impl_t const &get() const { return *ref_; }
private:
    impl_t* ref_;
};

namespace boost { 
    template <> struct property_traits<bidi_color_map> {
        typedef default_color_type          value_type;
        typedef default_color_type          reference;
        typedef Traits::vertex_descriptor   key_type;
        typedef read_write_property_map_tag category;
    };
}

boost::property_traits<bidi_color_map>::reference get(bidi_color_map const& idx, boost::property_traits<bidi_color_map>::key_type const& key) {
    auto it = idx.get().find(key);
    if (it != idx.get().end())
        return it->color;
    else
        throw std::range_error("key not found in index");
}

void put(bidi_color_map& idx, boost::property_traits<bidi_color_map>::key_type const& key, boost::property_traits<bidi_color_map>::value_type val) {
    auto it = idx.get().find(key);
    if (it != idx.get().end())
        idx.get().modify(it, [val](VertexColor& p) { p.color = val; });
    else
        idx.get().insert({key,val});
}

Now you can just pass that as the colormap:

    smart_map colorMap;
    bidi_color_map color_map(colorMap.get<by_vertex>());

See it Live On Coliru as well

Saturday, June 26, 2021
 
medhybrid
answered 6 Months ago
37

forked from codepen

/**
 * Circular menu v2
 */
* { margin: 0; padding: 0; }
html { font: 100%/1.3 Century Gothic, Verdana, sans-serif; }
body { overflow: hidden; min-width: 20em; }
.menuopt { display: none; }
.circle, .circle:before, .circle:after { border-radius: 50%; }
nav {
	margin: 5em auto;
	min-width: 16em; width: 72%; max-width: 40em;
}
nav ul {
	position: relative;
	padding: 50%;
	max-width: 0; max-height: 0;
	box-shadow: 0 0 .5em rgba(0,0,0,.5);
	list-style: none;
	background: white;
}
nav li {
	position: absolute;
	transition: 2s;
}
.slice {
	overflow: hidden;
	position: absolute;
	top: 0; left: 0;
	width: 50%; height: 50%;
	transform-origin: 100% 100%;
}
.unsel {
	top: 34%; left: 34%;
	width: 32%; height: 32%;
	box-shadow: 0 0 .75em;
	background: paleturquoise;
}
.coconut { transform: skewX(50deg); }
.vanilla { transform: rotate(40deg) skewX(50deg); }
.orange { transform: rotate(80deg) skewX(50deg); }
.almond { transform: rotate(120deg) skewX(50deg); }
.grape { transform: rotate(160deg) skewX(50deg); }
.blackberry { transform: rotate(-160deg) skewX(50deg); }
.cherry { transform: rotate(-120deg) skewX(50deg); }
.strawberry { transform: rotate(-80deg) skewX(50deg); }
.raspberry { transform: rotate(-40deg) skewX(50deg); }
.magnifiable { height: 100%; }
nav label { cursor: pointer; }
.slice label {
	display: block;
	width: 200%; height: 200%;
	transform: skew(-50deg) rotate(-70deg);
	box-shadow: 0 0 .1em black;
	opacity: .5;
	color: transparent;
	font-size: .8em;
	line-height: 1.9;
	text-align: center;
	text-decoration: none;
	transition: 1s;
}
.slice label:before {
	position: absolute;
	top: 10%; left: 10%;
	width: 80%; height: 80%;
	border-radius: 50%;
	box-shadow: 0 0 1em rgba(0,0,0,.5);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: 35% 35%;
	content: '';
}
.slice label:hover { opacity: 1; }
.dark label:hover { color: white; }
.light label:hover { color: black; }
.unsel label {
	display: block;
	height: 100%;
	background: radial-gradient(rgba(0,0,0,.5), transparent 50%);
}
.coconut label, .ococonut:checked ~ nav .unsel { background: #f4f5fa; }
.vanilla label, .ovanilla:checked ~ nav .unsel { background: #ffeb98; }
.orange label, .oorange:checked ~ nav .unsel { background: #ffb038; }
.almond label, .oalmond:checked ~ nav .unsel { background: #d3a573; }
.grape label, .ogrape:checked ~ nav .unsel { background: #d9e260; }
.blackberry label, .oblackberry:checked ~ nav .unsel { background: #833a68; }
.cherry label, .ocherry:checked ~ nav .unsel { background: #b1001d; }
.strawberry label, .ostrawberry:checked ~ nav .unsel { background: #ec0404; }
.raspberry label, .oraspberry:checked ~ nav .unsel { background: #ef6982; }
.coconut label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Cocos_nucifera00.jpg/320px-Cocos_nucifera00.jpg); }
.vanilla label:before { background-image: url(http://www.learningherbs.com/image-files/vanilla-extract-7.jpg); }
.orange label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/OrangeBloss_wb.jpg/250px-OrangeBloss_wb.jpg); }
.almond label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/PikiWiki_Israel_7025_Amond_blossom.jpg/170px-PikiWiki_Israel_7025_Amond_blossom.jpg); }
.grape label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Table_grapes_on_white.jpg/220px-Table_grapes_on_white.jpg); }
.blackberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg/220px-Ripe%2C_ripening%2C_and_green_blackberries.jpg); }
.cherry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Cherry_Stella444.jpg/220px-Cherry_Stella444.jpg); }
.strawberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/PerfectStrawberry.jpg/220px-PerfectStrawberry.jpg); }
.raspberry label:before { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Raspberries05.jpg/220px-Raspberries05.jpg); }
.slice label:hover:after { opacity: 0; }
.ococonut:checked ~ nav .coconut { transform: skewX(50deg) scale(1.05); }
.ovanilla:checked ~ nav .vanilla { transform: rotate(40deg) skewX(50deg) scale(1.05); }
.oorange:checked ~ nav .orange { transform: rotate(80deg) skewX(50deg) scale(1.05); }
.oalmond:checked ~ nav .almond { transform: rotate(120deg) skewX(50deg) scale(1.05); }
.ogrape:checked ~ nav .grape { transform: rotate(160deg) skewX(50deg) scale(1.05); }
.oblackberry:checked ~ nav .blackberry { transform: rotate(-160deg) skewX(50deg) scale(1.05); }
.ocherry:checked ~ nav .cherry { transform: rotate(-120deg) skewX(50deg) scale(1.05); }
.ostrawberry:checked ~ nav .strawberry { transform: rotate(-80deg) skewX(50deg) scale(1.05); }
.oraspberry:checked ~ nav .raspberry { transform: rotate(-40deg) skewX(50deg) scale(1.05); }
.ococonut:checked ~ nav .coconut label, 
.ovanilla:checked ~ nav .vanilla label, 
.oorange:checked ~ nav .orange label, 
.oalmond:checked ~ nav .almond label, 
.ogrape:checked ~ nav .grape label, 
.oraspberry:checked ~ nav .raspberry label {
	box-shadow: 0 0 .45em rgba(0,0,0,.5);
	opacity: 1; color: black;
}
.oblackberry:checked ~ nav .blackberry label , 
.ocherry:checked ~ nav .cherry label, 
.ostrawberry:checked ~ nav .strawberry label {
	box-shadow: 0 0 .45em rgba(0,0,0,.5);
	opacity: 1; color: white;
}
@media (min-width: 25em) { .slice label { font-size: 1em; line-height: 2.3; } }
@media (min-width: 35em) { .slice label { font-weight: 700; line-height: 2.7; } }
<!-- content to be placed inside <body>…</body> -->
<input type='radio' name='opt' id='ococonut' class='menuopt ococonut'>
<input type='radio' name='opt' id='ovanilla' class='menuopt ovanilla'>
<input type='radio' name='opt' id='oorange' class='menuopt oorange'>
<input type='radio' name='opt' id='oalmond' class='menuopt oalmond'>
<input type='radio' name='opt' id='ogrape' class='menuopt ogrape'>
<input type='radio' name='opt' id='oblackberry' class='menuopt oblackberry'>
<input type='radio' name='opt' id='ocherry' class='menuopt ocherry'>
<input type='radio' name='opt' id='ostrawberry' class='menuopt ostrawberry'>
<input type='radio' name='opt' id='oraspberry' class='menuopt oraspberry'>
<input type='radio' name='opt' id='unsel' class='menuopt' checked>
<nav>
	<ul class='circle'>
		<li class='coconut light slice'>
				<label for='ococonut' class='circle'>Coconut</label>
		</li>
		<li class='vanilla light slice'>
				<label for='ovanilla' class='circle'>Vanilla</label>
		</li>
		<li class='orange light slice'>
				<label for='oorange' class='circle'>Orange</label>
		</li>
		<li class='almond light slice'>
				<label for='oalmond' class='circle'>Almond</label>
		</li>
		<li class='grape light slice'>
				<label for='ogrape' class='circle'>Grape</label>
		</li>
		<li class='blackberry dark slice'>
				<label for='oblackberry' class='circle'>Blackberry</label>
		</li>
		<li class='cherry dark slice'>
				<label for='ocherry' class='circle'>Cherry</label>
		</li>
		<li class='strawberry dark slice'>
				<label for='ostrawberry' class='circle'>Strawberry</label>
		</li>
		<li class='raspberry light slice'>
				<label for='oraspberry' class='circle'>Raspberry</label>
		</li>
		<li class='unsel circle'><label for='unsel'></label></li>
	</ul>
</nav>

Or even this one

$(document).ready(function() {
  //Center the "info" bubble in the  "circle" div
  var divTop = ($("#divCircle").height() - $("#middleBubble").height()) / 2;
  var divLeft = ($("#divCircle").width() - $("#middleBubble").width()) / 2;
  $("#middleBubble").css("top", divTop + "px");
  $("#middleBubble").css("left", divLeft + "px");

  //Arrange the icons in a circle centered in the div
  numItems = $("#divCircle img").length; //How many items are in the circle?
  start = 0.0; //the angle to put the first image at. a number between 0 and 2pi
  step = (4 * Math.PI) / numItems; //calculate the amount of space to put between the items.

  //Now loop through the buttons and position them in a circle
  $("#divCircle img").each(function(index) {
    radius = ($("#divCircle").width() - $(this).width()) / 2.3; //The radius is the distance from the center of the div to the middle of an icon
    //the following lines are a standard formula for calculating points on a circle. x = cx + r * cos(a); y = cy + r * sin(a)
    //We have made adjustments because the center of the circle is not at (0,0), but rather the top/left coordinates for the center of the div
    //We also adjust for the fact that we need to know the coordinates for the top-left corner of the image, not for the center of the image.
    tmpTop = (($("#divCircle").height() / 2) + radius * Math.sin(start)) - ($(this).height() / 2);
    tmpLeft = (($("#divCircle").width() / 2) + radius * Math.cos(start)) - ($(this).width() / 2);
    start += step; //add the "step" number of radians to jump to the next icon

    //set the top/left settings for the image
    $(this).css("top", tmpTop);
    $(this).css("left", tmpLeft);
  });

});

$('.avatarList').click(function() {
  $(this).toggleClass('expand');
  $('#divCircle').toggleClass('expand');
});

$('#divCircle img').click(function() {
  var theSrc = $(this).attr('src');
  // alert(theSrc);
  $('.mainImg img').attr('src', theSrc);
});
html {
  background: #f2f6f8;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f8), color-stop(50%, #d8e1e7), color-stop(51%, #b5c6d0), color-stop(100%, #e0eff9));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
  /* IE6-9 */
}
.body {
  width: 200px;
  font-family: sans-serif;
  margin: 10% auto;
  text-align: center;
  height: 200px;
}
#divCircle {
  width: 195px;
  height: 195px;
  border-radius: 200px;
  position: relative;
  overflow: hidden;
  top: -10px;
  left: -10px;
  opacity: 0;
  margin: -60px;
  -webkit-transition: opacity 0s 0s;
}
#divCircle img {
  position: absolute;
  width: 50px;
  height: 50px;
  background: orange;
  border-radius: 60px;
  border: 2px #000 solid;
  -webkit-transition: all 0.4s;
}
#divCircle img:hover {
  border: 2px #333 solid;
  width: 55px;
  height: 55px;
}
#middleBubble {
  text-align: center;
  vertical-align: top;
  color: #252525;
  /*#6d6e71*/
  height: 60px;
  width: 60px;
  position: absolute;
  text-align: center;
}
#middleBubble img {
  top: 0px !important;
  left: 0px !important;
}
.mainImg {
  width: 60px;
  position: absolute;
  margin: -60px;
}
.mainImg img {
  width: 60px;
  border-width: 0px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 600px;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  margin: 60px 0 0 60px;
}
.avatarList {
  margin: 0px -60px;
  display: inline-block;
  /*  border:1px black solid; */
  width: 60px;
  height: 60px;
  background: orange;
  border-radius: 60px;
}
.avatarList.expand .mainImg img {
  border-color: rgba(0, 0, 0, 1);
  border-width: 60px;
  margin: 0;
}
#divCircle.expand {
  display: block;
  opacity: 1;
  -webkit-transition: opacity 0.5s 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div>Click to pick avatar</div>
  <br/>
  <div class="avatarList">
    <div class="mainImg">
      <img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/i04.png">
    </div>

    <div id="divCircle">
      <div id="middleBubble"></div>
      <img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/a03.png">
      <img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/c05.png">
      <img src="https://gp5.googleusercontent.com/-esaz03FKsLU/AAAAAAAAAAI/AAAAAAAAAAA/kk0t9Rd9DB0/s48-c-k-no/photo.jpg">
      <img src="http://www.veryicon.com/icon/png/Avatar/Face%20Avatars/Male%20Face%20G1.png">
      <img src="http://icons.iconarchive.com/icons/hopstarter/face-avatars/256/Female-Face-FG-1-brunette-icon.png">
      <img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/c05.png">
      <img src="http://png-1.findicons.com/files/icons/1072/face_avatars/300/i04.png">
    </div>

  </div>

</div>
<!--body-->
Sunday, August 22, 2021
 
Tapha
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share