Increasing the size of the center image by using CSS elements placed along the circumference

Is there a way to enlarge the center image by 1.25 times compared to the outer images? You can view the code on this codepen. For a simplified explanation of the code, check out this link.

I have attempted to adjust the circle size but it ends up affecting all images.

<ul class='circle-container'>
  <li><img src='http://lorempixel.com/100/100/city'></li>
  <li><img src='http://lorempixel.com/100/100/nature'></li>
  <li><img src='http://lorempixel.com/100/100/abstract'></li>
  <li><img src='http://lorempixel.com/100/100/cats'></li>
  <li><img src='http://lorempixel.com/100/100/food'></li>
  <li><img src='http://lorempixel.com/100/100/animals'></li>
  <li><img src='http://lorempixel.com/100/100/business'></li>
</ul>

/// Mixin for arranging items in a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
/// 
/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
@mixin distribute-on-circle($nb-items, $circle-size, $item-size) {
  $half-item: ($item-size / 2);
  $half-parent: ($circle-size / 2);

  position: relative; /* 1 */
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%;
  list-style: none; /* 2 */
  box-sizing: content-box; /* 3 */

  > * { /* 4 */
    display: block;
    position: absolute;
    top:  50%;
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -$half-item;
  }

  $angle: (360 / $nb-items);
  $rot: 30;

  @for $i from 1 through $nb-items {
    > :nth-of-type(#{$i}) {
      transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
    }
    $rot: ($rot + $angle);
  }
}

.circle-container {
  @include distribute-on-circle(6, 20em, 6em);
  margin: 5em auto 0;
  border: solid 1px tomato;
}

.circle-container img {
  display: block;
  width: 100%;
  border-radius: 50%;
}

https://i.sstatic.net/1I5Wr.png

Answer №1

If you want to target the last image in the .circle-container list, you can use the selector

.circle-container li:last-child img
and then apply the CSS property transform: scale(1.25).

.circle-container {
  position: relative;
  /* 1 */
  width: 20em;
  height: 20em;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  /* 2 */
  box-sizing: content-box;
  /* 3 */
  margin: 5em auto 0;
  border: solid 1px tomato;
}
.circle-container > * {
  /* 4 */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 6em;
  margin: -3em;
}
.circle-container > :nth-of-type(1) {
  transform: rotate(30deg) translate(10em) rotate(-30deg);
}
.circle-container > :nth-of-type(2) {
  transform: rotate(90deg) translate(10em) rotate(-90deg);
}
.circle-container > :nth-of-type(3) {
  transform: rotate(150deg) translate(10em) rotate(-150deg);
}
.circle-container > :nth-of-type(4) {
  transform: rotate(210deg) translate(10em) rotate(-210deg);
}
.circle-container > :nth-of-type(5) {
  transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.circle-container > :nth-of-type(6) {
  transform: rotate(330deg) translate(10em) rotate(-330deg);
}

.circle-container img {
  display: block;
  width: 100%;
  border-radius: 50%;
}

.circle-container li:last-child img {
  transform: scale(1.25);
}
<ul class='circle-container'>
  <li><img src='http://lorempixel.com/100/100/city'></li>
  <li><img src='http://lorempixel.com/100/100/nature'></li>
  <li><img src='http://lorempixel.com/100/100/abstract'></li>
  <li><img src='http://lorempixel.com/100/100/cats'></li>
  <li><img src='http://lorempixel.com/100/100/food'></li>
  <li><img src='http://lorempixel.com/100/100/animals'></li>
  <li><img src='http://lorempixel.com/100/100/business'></li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include a scrollbar in a modal window?

Does anyone know how to add a scroll function to my modal in CSS? I have too many elements and would like to implement a scrollbar. You can see what it looks like here: https://i.sstatic.net/4Txrn.png Any suggestions on how to add the right scrollbar? If ...

How to easily toggle multiple elements using jQuery

I'm having trouble getting this block of code to function properly: $("a.expand_all").on("click",function(){ $(this).text('Hide'); $('.answer').each(function () { $(this).slideDown(150, function () { $( ...

Ensuring continuous execution of JS EventListener

The other day, I received a solution from someone on this platform for a script that changes the color of a div when scrolling. Here is the code I implemented: const x = document.getElementById("menuID"); window.addEventListener("scroll", () => { ...

"Crafting sleek and polished titles using HTML and CSS - A step-by-step guide

I've noticed an increasing number of websites that feature incredibly slick headlines, such as the ones on this site: How do these websites achieve this effect? Are there any subtle hints to look out for? I once heard about a technique involving Fla ...

Extract information from a string and format it into JSON using PHP

This PHP script has got me stuck on a particular issue. I am having trouble splitting the data correctly. Currently, I have a list of numbers in this format: 50.0.1 581 50.0.2 545 50.0.3 541 50.0.4 18 50.0.5 2 50.0.6 33 50.0.7 1 [...] I need to convert ...

What is the method for setting the doctype to HTML in JavaScript or React?

I created a canvas with a height equal to window.innerHeight, but unexpectedly it seems to have 100% screen height plus an extra 4 pixels coming from somewhere. I came across a solution suggesting that I need to declare doctype html, but I'm unsure ho ...

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...

I am having trouble getting the jsTree ajax demo to load

I am having trouble running the basic demo "ajax demo" below, as the file does not load and the loading icon continues to churn. // ajax demo $('#ajax').jstree({ 'core' : { 'data' : { ...

jQuery Ajax Load() causing screen to refresh unintentionally upon clicking

I am currently developing a web application that includes side menus. However, I am facing an issue with the functionality of these menus. Whenever I click on certain options, the entire page refreshes. For example, under my main menu "Planning the Engagem ...

Displaying JSON data in an HTML table cell format

Hey everyone, I need some help with the following task: I am working on displaying a list of log lines in an HTML table. Some of these lines will contain JSON strings, and I want to format the JSON data within the table when the HTML file is loaded from ...

Dimensions of Bootstrap carousel

I am attempting to create a Bootstrap carousel with full-width images (width: 100%) and a fixed height. However, when I set the width to 100%, the height automatically takes on the same value. I am unsure if the issue lies within my files. <div id="m ...

How can I center two divs within a wrapper div without also centering all the text inside?

Is there a method other than using display: inline-block and text-align:center that allows us to center two divs inside a wrapper div? I prefer not to have my text centered. ...

JavaScript's Math.round function does not always produce accurate results

After adding the specified line within the function, the code seems to encounter issues. parseLocalFloatCnt: num = Math.round(num*1.2); Is there a solution available for this problem? Your help is much appreciated. <!DOCTYPE html> <html> < ...

Ionic Framework: Eliminating the tiny 1px vertical scroll glitch for single-line content

Is anyone else experiencing this issue? I noticed that my page content is not filling up the entire space, even though it's just one line of text. There seems to be a 1px vertical scroll present, and the same problem occurs with the content in the sid ...

Transforming HTML features into PHP scripts. (multiplying two selected values)

I am currently working on converting these JavaScript functions into PHP in order to display the correct results. I need guidance on how to use PHP to multiply the values of the NumA and NumB select options, and then show the discount in the discount input ...

Listening for events to wait for all XMLHttpRequest requests within an iframe

I have a basic HTML page that includes an iframe element <html> <head> $('#page-wrapper').ajaxStop(function() { console.log("Page Fully Loaded." ); }); </head> <body> <h3>Demo Page<h3> <iframe id= ...

A guide to showcasing JSON data on a webpage using JavaScript

I am currently working on a SOAP WSDL invocation application in MobileFirst. The response I receive from the SOAP WSDL is in JSON format and is stored in the result variable. When trying to access the length of the response using result.length, I encounter ...

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

Receiving a NaN output rather than a numerical value

Experiencing what seems to be a straightforward syntax error, but I'm unable to pinpoint it. Controller: $scope.startCounter = 3; $scope.startTimeouter = function (number) { $scope.startCounter = number - 1; mytimeouter = $t ...