Home html Picture over the picture HTML CSS

Picture over the picture HTML CSS

Author

Date

Category

Good evening!

There is a bulletin board where the general list of ads is rows. If you turn on the “VIP ad” function, the string is painted in another color. Trying to fasten the picture “VIP” to the angle over the ad image of the ad. However, Div has variables that determine which announcement is simple or VIP, and use different CSS styles. How to fasten the picture on top in this case?

& lt; td valign = "top" width = "{$ colwidth}%" & gt;
 & lt; div class = "bd_item {{$ con .is_vip} _vip {/ if}" & gt;

variables responsible for simple or VIP ad

& lt; table width = "100%" height = "" CellSpacing = "" CellPadding = "0" class = "b_table_tr "& gt;
 & lt; TR & GT;
  {if $ cfg.photos}
   & lt; TD width = "90" Valign = "Top" & gt;
    & lt; img class = "bd_image_small" src = "/ images / boards / small / {$ con.file}" border = "0" alt = "{$ con.title | escape: 'html'}" / & gt;
   & lt; / td & gt;

Answer 1, Authority 100%

In your example, there is not enough information on the structure, but I will risk posting the implementation. demo .

html

& lt; div class = "bd_item bd_item_vip" & gt;
  & lt; img src = "/ path / to / image" & gt;
& lt; / div & gt;

css

. BD_IPEM {
  Position: relative;
  width: 140px;
  Overflow: Hidden;
}
.bd_item_vip: after {
  CONTENT: 'VIP';
  Background: # C76649;
  z-index: 800;
  Padding-TOP: 3px;
  Color: White;
  Font-Family: Roboto;
  Letter-Spacing: 1px;
  font-weight: 400;
  TEXT-TRANSFORM: NONE;
  Text-Align: Center;
  Display: INLINE-BLOCK;
  width: 100px;
  Font-Size: 10px;
  Line-Height: 14px;
  -Webkit-Transform-Origin: Center Center;
  -MS-transform-origin: center center;
  Transform-Origin: Center Center;
  Top: 3px;
  Border-Bottom: 2px Solid # 7A3521;
  Right: -38px;
  -WebKit-Transform: Rotate (45deg);
  -MS-transform: rotate (45deg);
  Transform: Rotate (45deg);
  Position: Absolute;
}

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions