Guide: Positioning the Icon in the Top Right Corner of the Image

Objective:
The goal is to ensure that the expand icon is always at the upper right corner of the image, regardless of its size or the responsive design in place.

Challenge:
I have attempted to address this issue but have unfortunately been unsuccessful.

Additional Information:
*Please consider the responsiveness of the design
*I am utilizing Bootstrap v3

Thank you!

.expand-position-for-picture {
  border-radius: 22px;
  color: black;
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px 13px 10px 14px;
  text-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
  -webkit-transition: background .3s;
  transition: background .3s;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />


<a href="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive" title="">
  <img src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive">
  <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>


<a href="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive" title="">
  <img src="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive">
  <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>


http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

jqueryhtmlcsstwitter-bootstrap-3expand

Answer №1

Here is an example similar to this.

a.box {
  position: relative;
  display: inline-block;
}
.adjust-picture-position {
  border-radius: 22px;
  color: black;
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px 13px 10px 14px;
  text-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
  -webkit-transition: background .3s;
  transition: background .3s;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<a href="http://www.example.com/image1.jpg" class="box img-responsive" title="">
  <img src="http://www.example.com/image1.jpg" class="box img-responsive">
  <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>
<a href="http://www.example.com/image2.jpg" class="box img-responsive" title="">
  <img src="http://www.example.com/image2.jpg" class="box img-responsive">
  <div class="adjust-picture-position"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>

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

Making a Connection with Ajax in Django: Adding Friends

I have been exploring the capabilities of Django-Friends My goal is to make it so that when a user clicks on the add friend button, it either disappears or changes to say "Request sent". However, I am encountering an issue where the button does not disapp ...

javascriptjquerypythonajaxdjango

Why do my tablet media queries take precedence over mobile view media queries?

I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...

cssresponsive-designmedia-queriesstyling

Using Vue.js to update the v-bind:style when the mouse hovers over the element

I am working with a span element that displays different background images based on certain conditions. Here is the HTML: <span v-if="type" :style="styles" > </span> In the computed properties section: ...

javascripthtmlcssvue.js

Discover the steps to integrating jsfiddle into my local development environment

If you want to check out the code for this example, head over to jsfiddle at this link. And below is a snippet of the HTML file: <!DOCTYPE html> <html> <head> <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type= ...

javascriptjqueryhtmlcss

What is the best method to calculate the dimensions of flex items without relying on percentages?

Imagine this as the structure of my HTML, with an unspecified number of div elements: <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div>& ...

htmlcssflexbox

Shapes and their corresponding encoded representations compiled in a comprehensive catalog

Can anyone provide me with a comprehensive list of HTML escaped codes for displaying various shapes on web pages? I need codes that are universally compatible with all browsers. For instance, I would like to display a square using an escaped code in one ...

htmlasciishapes

Is there a way to assign "label 3" with the identical percentage as "label 1" on this particular form?

I'm currently using Bootstrap 4 for my project. I want to adjust "label 3" to have the same width as "label 1," while keeping the input width and the rest of the page intact (as shown in the code). Is this possible to achieve? Thank you. https://i ...

cssformstwitter-bootstrapbootstrap-4

Overlaying images with cropped elements

When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle. Something resemblin ...

javascriptcss

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

javascriptcssangularjstwitter-bootstrap

Personalized design for the range input in React

I am working on a React component that includes an input range element. I have used some CSS to style it vertically and currently, it looks like this: https://i.stack.imgur.com/WmQP4.png My goal is to customize the appearance of the slider so that it res ...

htmlcssreactjs

The function will provide the value prior to the execution of the Jquery image loading

if (DataService.Validation(file)) { //angularjs call to api controller }; //DataService Validation: function (file) { var Url = URL.createObjectURL(file); var img = new Image(); $(img).load(function () { var imgwidth = this. ...

javascriptjqueryangularjsjquery-uijquery-file-upload

Using buttons as spinners for input elements with identical styles but unique identifiers

Currently, I am in the process of developing a project that involves users. In order to display all users, I am executing a query on an SQL database. After styling the interface, I have added an input element beside each user, which initializes at zero. Ad ...

javascriptjqueryhtmlcss

What is the best way to find an element using either 'className1' or 'className2'?

Within my project, all locators are defined as elements of an enum and follow this format: For example, if it is a CSS locator - DIV_LOCATION("css=div.location-text.text-overflow"). This method parses the string and identifies it as a CSS locator if it be ...

cssseleniumcss-selectors

Delete the HREF attribute after accessing the LINK

I am looking to achieve a specific effect... <div id="content"><a href="#MyForm">some text</a></div> After Clicking/Accessing the Link once, I want "some text" to appear as ordinary text... like <div id="content"><a>s ...

jqueryhtmlhref

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

I am working with a JSON data Object and using $.each to dynamically retrieve the data. However, I want to display all values except for one which is the ID. How can I achieve this and prevent the ID from being displayed in the HTML structure? Thank you. ...

javascriptjqueryarraysjsondata-objects

Is it possible to integrate an html page within a wordpress website?

I'm a WordPress newbie but I have experience with HTML, CSS, JS, and PHP. Can anyone guide me on how to incorporate existing HTML pages into my WordPress site? I recently set up WordPress successfully on my domain hosted by GoDaddy (www.mydomain.com) ...

phpwordpresshtml

How to send two different types of data using jQuery/AJAX to a .php file? (Syntax)

I am completely new to the world of jQuery/AJAX and I could really use some guidance. Here is the code snippet in question: $(function () { $('.button').on('click', function (event) { event.preventDefault(); //prevents ...

javascriptphpjqueryajax

There seems to be a glitch with the Flask flash messaging feature, as

My Flask application includes login and register routes where I aim to display flash messages when username passwords are not matched. Specifically, this issue arises in my index and login routes: @app.route('/') @login_required def index(): ...

pythonhtmlflaskwebflash-message

What is the best way to retrieve the responseText using the jQuery.getJSON method within JavaScript?

I am currently facing an issue where I am attempting to retrieve information from a JSON file located in my directory by utilizing the jQuery.getJSON method. Unfortunately, when I try to access the object shown in the image, I am unable to extract the resp ...

javascriptjqueryjson

Interactive Component overlying Layer - HTML/CSS

Currently, I am working on a web application that features a navigation bar at the bottom of the screen. To enhance visibility, I decided to apply a linear gradient overlay above the underlying elements. This screenshot illustrates what I mean. However, I ...

javascripthtmlcssvue.js