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

Adding a CSS style to a specific child element

Here is an example snippet <html> <head> <style> .test > input { //this selector is incorrect. color:red; } </style> </head> <body> <div class="test"> <di ...

htmlcss

Fixed Div Columns on the Far Left

My goal is to create a left-floating div that remains fixed in place while allowing another div to float next to it, creating two columns that stay intact when the page is scrolled. After researching, it seems like fixed position and floating elements don ...

css-floathtmlcss-position

The battle between DataBind and control property settings

When considering these two methods: <asp:Label ID="Label1" runat="server"><%# DateTime.Now %></asp:Label> and Label1.Text = DateTime.Now.ToString(); Which approach do you prefer and what is your reasoning behind it? ...

asp.nethtmldata-binding

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

javascriptcssangularjsdom

Is there a way to verify if a checkbox has been checked?

Having trouble with this code: if($('#primayins').prop('checked')) { $("#tx_nm0x0_pricingplan").val(1); } else { $("#tx_nm0x0_pricingplan").val(2); } It keeps returning false consistently ...

javajavascriptjqueryhtml

XDomainRequest for cross-domain ajax is throwing an error that is difficult to understand - an empty error message

Here is my AJAX call to a page on a different domain: if ($.browser.msie && window.XDomainRequest) { // Use Microsoft XDR var xdr = new XDomainRequest(); xdr.open("post", "https://different-domain.aspx"); ...

javascriptjqueryajaxxdomainrequestxdr

Need to update various form fields at once with jquery?

There is a form with fields for firstname, lastname, email, country, along with edit icon and submit/cancel buttons. When the user clicks on the edit icon in the top right corner, all values will be displayed in textboxes and the country will be shown in ...

javascriptjqueryhtmlcss

Prevent users from changing dropdown options after a form submission fails using Javascript and Jquery

Currently, I am pursuing the tech degree at Team Treehouse and my third project involves creating an interactive form. To simplify my issue, I will outline it in bullet points: The credit card payment method should be preselected when the page loads. I n ...

javascriptjquery

Deactivate input areas while choosing an option from a dropdown menu in HTML

I've been working on creating a form and have everything set up so far. However, I'm looking to disable certain fields when selecting an option from a dropdown list. For instance, if the "within company" option is selected for my transaction typ ...

javascripthtmlangularjsionic-framework

Adapting Bootstrap components based on the screen size: Viewport-driven

Check out our Custom Sizing Solution, designed to offer sizing options tailored to different devices and viewports. Here's what we can do: For small devices, the width will be set at 100% For larger devices, the width will be adjusted to 75% For ext ...

csstwitter-bootstrap

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

phpjavascriptmysqlhtmlonbeforeprint

Discrepancy in performance of jQuery.load function between local machine and remote server

When utilizing the jQuery.load function to create dynamic pages and sending data using the POST method, I encountered an issue. On my local PC (Windows with Apache/PHP server), everything worked perfectly. However, upon uploading it to my hosting server on ...

phpjqueryajax

Transforming a Bootstrap Background Image to a Captivating Video Display

Here is the CSS code snippet that I'm having trouble with: .masthead { position: relative; width: 100%; height: auto; min-height: 35rem; padding: 15rem 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75% ...

htmlcssvideobackground

I require assistance in implementing a button for executing this specific HTML code

Can someone assist me in embedding my HTML code into a button so that when the button is clicked, my code executes? function loadProgressBar() { var bar = document.getElementById('progressBar'); var status = document.getElementById(&ap ...

javascripthtmlprogress-bar

Javascript encountering compatibility issues with certain versions of Internet Explorer; employing browser detection workaround

Unfortunately, Internet Explorer is causing issues when trying to execute this script (specifically the 'else' part). Despite numerous attempts, I have been unable to resolve it. $(document).ready(function(){ if (navigator.appName != "Micros ...

javascriptjquery

Managing the initial record in mysql

As I work on a slideshow, my goal is to dynamically change the HTML class attribute from "item" to "item active" when the first record is fetched from the database. For all subsequent records, the class should revert back to just "item." $RelatedTo=1; $ ...

phphtmlmysqlsqldatabase

Employing live labels on a Morris Bar Chart

I'm using the Morris Bar Chart to showcase the sales of different products. To enhance user experience, I want to display dynamic labels when hovering over the bars. The data is being fetched through PHP. array('product' => $row['pr ...

javascriptphpjquerymorris.js

Encountering the error message "Unable to access property 'addEventListener' of null while trying to manipulate innerHTML"

Currently, I am utilizing innerHTML to include certain elements and a wrapper around them. for (i = 0; i < arr.length; i++) { b.innerHTML += "<div class='wrapper'><div class='col-4'>" + arr[i].storeID + "</div> ...

javascripthtml

Solving regex issues within PHP

<div class="start">...</div> Is there a way to extract the content within <div class="start"> using PHP? I am looking for a regular expression solution that is capable of handling nested scenarios. ...

phphtmlregex

What could be the reason for a Python server receiving a JSON message as None?

I'm a beginner in web programming and currently trying to grasp the concept of sending messages between a Python server and a JavaScript client. After stumbling upon a helpful guide at , I learned how to set up a Python server using Flask and send re ...

jquerypythonjsonajaxflask